Настраиваем форму комментариев-придаем свой стиль

Сегодня расскажу об очередном методе как же придать своему шаблону на блоггер индивидуальный дизайн, при помощи изменения поля комментариев. На мой взгляд это один из важнейших элементов для выражения стилистики Вашего блога. Посмотрите на примеры:





Так же есть возможность добавлять анимированные элементы.
Я думаю многим придутся по душе такие нововведения, так что давайте научимся как это делать:
1. Форма комментариев с выделением  и ребенком (Please do not spam)
а) Заходим в настройки шаблона и находим следующий тэг (используйте комбинацию ctrl+f):
<div class='comment-form'>
б) Затем замените данный тэг предоставленным ниже:
<div id='mbt-form'>
в) Найдите следующий тэг:
]]></b:skin>
и перед ним вставьте приведенный ниже CSS код
#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYIwDP5bof7d7tUtk6r8ICtsycDc4Pxj1DfjJMEsI-Y6EQfuBtGVoy3430act5HY7T-zK09BQY-cuOAyS1a82gIjFAcZHfZeDmHdKbKeSgVwaJHEzBzKrU8Zw-1Xak774M1bp3mCfVfdK/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#mbt-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVuZh1cEobaXJZWkBwGfBWImTnqBID8w0CYcszztPmHq2QIuCeAUbzI3RojEWDRK4weCmw-EAxAkRAr6fOGnoSAJVMAtYm-5nDra52zX4oP8v6yBdqnGHut4TJOMvb0ekbWgtCcy-IcPG/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}
Сохраните шаблон и посмотрите форму комментариев =)
2. Теперь давайте обсудим элементы CSS кода которые помогут Вам настроить форму комментариев под себя. Вот три важных элемента:
#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a
3. Объяснения по каждому элементу:
а) Настройка фона:
#mbt-form iframe
background : этот элемент отвечает за цвет фона, картинку фона и ее расположение:

• #ffffff : Это цвет фона, его можно изменить при помощи- Color Chart
• url : Это ссылка на картинку для фона, в начальном случае это ребенок , Вы можете вставить картинку какую пожелаете.
• bottom right: Это позиция картинки (Справа внизу). Вы можете расположить картинку как захотите справа вверху , слева внизу , слева вверху для этого используйте команды: bottom right или bottom left или top right или top left

border: Границы

• border size  7px, размер границ
• border style  solid. Стиль границ Вы можете выбирать жирные, курсив, точки. Используйте для этого команды :solid, dotted, dashed. Посмотрите данный ресурс border styles
• border color   #C7C7C7. Используйте CSS Color Chart для подбора цветов.

padding: Это элемент отвечает за расположение комментариев от текста, Вы можете изменять данный элемент на любой удобный.
font: Отвечает за стиль шрифтов. Установлены следующий параметры:

• boldness : normal,
• size : 12pt
• Шрифт "ms sans serif". Если браузер не имеет формата шрифта "ms sans serif" то установлен дополнительный Arial.

color: Цвет
Используйте подбор цветов чтобы выбрать нужный цвет текста
width: Ширина формы комментариве
б) Выделение при наведении мыши:
#mbt-form iframe:hover
Когда пользователь наведет на поле комментариев мышью, то его цвет будет меняться.
Сдесь Вы найдете элементы объясненные ранее, только данные установки входят в силу при наведении на поле комментариев мыши.
в) Изменение цвета ссылок:
#mbt-form a
Этот элемент изменяет цвет двух ссылок : Выйти и и подписать по E-mail.
color: Измените цвет на подходящий.
Вот так не сложно Вы можете придать своему блогу уникальный вид.