Как добавить цветное текстовое поле на сайт Weebly? »WebNots

• Использование встроенного стиля CSS
• Использование встроенного стиля CSS
• Использование внешнего CSS путем изменения основной таблицы стилей

Использование встроенного CSS

Встроенный CSS используется для стилизации отдельных элементов, и здесь мы будем стилизовать элемент абзаца. Используйте следующий код, чтобы добавить цветное текстовое поле на свой сайт:

<p align=justify style="background-color:#02f3e5;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;"><b>
This is a Sample Textbox</b>
</p>

Атрибуты заполнения и поля используются для выравнивания текста внутри поля и создания необходимой высоты поля. Вы можете добавить свой собственный текст и настроить цвет в соответствии с макетом страницы. Цветовой код может быть шестнадцатеричным кодом, например # 808080, или использовать прямые цвета, такие как «голубой» или «серый» вместо кода.

Когда ваш код будет готов, используйте элемент «Embed Code» и вставьте код внутри элемента. Примеры текстовых полей показаны ниже для разных цветов:

Пример текстового поля с цветом фона: # 02f3e5

Пример текстового поля с цветом фона: розовый

Пример текстового поля с цветом фона: светло-голубой

Пример текстового поля с цветом фона: светло-серый

Пример текстового поля с цветом фона: # a2fae5

Пример текстового поля с цветом фона: красный

Вы можете использовать любые HTML-теги внутри текстового поля, например, ниже приведен код и образец окна для связывания веб-страницы с помощью тега привязки.

<p align=justify style="background-color:#ededde;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;">
<a href="https://www.webnots.com/removing-and-customizing-weebly-sidebar/">
<b>Want to Customize Weebly Blog Sidebar?</b> 
</a>
</p>

А вот как это выглядит:

Хотите настроить боковую панель блога Weebly?

Использование встроенного стиля CSS

Ниже приведено текстовое поле стиля цитаты блока с использованием встроенного стиля CSS:

«С помощью CSS легко создавать текстовые поля с разными цветами фона. Это цветное текстовое поле в стиле цитаты с использованием CSS. Вы можете встроить код, используя встроенный элемент кода в Weebly ».

Скопируйте и вставьте приведенный ниже код внутрь элемента кода внедрения, чтобы создать текстовое поле:

<p class="webnots_quote">
<em>
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat."
</em>
</p>
<style>
.webnots_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 15px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
</style>

Использование внешнего CSS путем изменения основной таблицы стилей CSS

Если вы изменяете исходный HTML / CSS, вам необходимо сохранить свою тему под новым именем. Когда вы переключитесь на любую другую стандартную тему, вы потеряете все изменения, и вам нужно будет снова изменить CSS этой темы. Следующие шаги объяснят вам, как разместить этот абзац на своем веб-сайте.

• Перейдите к опции «Редактировать HTML / CSS», доступной на вкладке «Тема» редактора Weebly.
• Добавьте следующий код в любом месте файла «main.less», доступного в разделе «Стили».

.paragraph-textbox{
background: #02f3e5;
filter:alpha(opacity=80);
opacity:0.8;
color: #e9e9e9;
border-radius: 8px;
font-weight: bold;
padding: 5px 5px 5px 10px;
margin:0 auto;
}

• Вы можете настроить цвет и шрифты в соответствии с темой вашего сайта.
• Когда вы закончите, перетащите элемент «Вставить код» на свой сайт, где вы хотите добавить текстовое поле.
• Вставьте приведенный ниже код в элемент кода внедрения.

<div class="paragraph-textbox">This is a Sample Textbox</div>

Сброс стилей шрифтов по умолчанию

В обоих вышеупомянутых методах существует вероятность несоответствия шрифта шрифту вашей темы. Если вы не видите шрифты в текстовом поле должным образом, обязательно сбросьте настройки шрифта абзаца на значения по умолчанию.

Это можно установить с помощью параметра «Изменить шрифты», доступного на вкладке «Тема». Выделите текст абзаца и нажмите ссылку «Сброс», чтобы изменить шрифты на настройки по умолчанию, как показано на рисунке ниже.

Сбросить настройки шрифта абзаца в Weebly