Изменить дизайн формы отправки комментариев

Привет, друзья. В своё время я писала пост, как с помощью CSS изменить дизайн окна формы создания комментариев. Отошли от стандартного варианта и сделали её намного привлекательней. Сегодня не оставим без внимания форму отправки комментариев в Блоггере, которая тоже выглядит достаточно скучно.
Предложу 3 простых варианта, чтобы был выбор, если вы захотите изменить её внешний вид. С помощью совсем маленьких кодов CSS, где можно всё подстроить под ваш дизайн.

Вариант 1. Практически ничего не меняем, а лишь добавим немного тени.

Код.

#comment-editor{background:#ffffff;repeat-x;border:1px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow: 5px 5px 5px #CCCCCC;padding:5px;width:580px; height:234px !important;}

Всё что я отметила синим цветом ;box-shadow: 5px 5px 5px #CCCCCC; это именно те строки, которые отвечают за размеры и цвет тени. Зелёным цветом закругление углов всей коробки самой формы.

Вариант 2. Поменяем в первом коде значение  background:#ffffff на background:#99CC99; и уже совсем другой вид.

Код.

#comment-editor{background:#99CC99;repeat-x;border:2px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow: 5px 5px 5px #CCCCCC;padding:5px;width:580px; height:234px !important;}

Вариант 3. Продолжаем играться с кодом. Вместо фона вставим картинку и изменим цвет рамки. Вот такая красота получается.

Посмотрите последний вариант на тестовом блоге.

Демонстрация.

Код.

#comment-editor{background:url(http://img0.liveinternet.ru/images/attach/c/2/73/556/73556146_a2185ct.jpg) ;repeat-x;border:2px solid #336633;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow: 5px 5px 5px #CCCCCC;padding:5px;width:580px; height:234px !important;}

Если не нужна тень убирайте в последних двух кодах строку box-shadow: 5px 5px 5px #CCCCCC; уже будет другой вариант формы отправки комментариев.

Ширину коробки width:580px можно регулировать в зависимости от ширины поля комментариев вашего шаблона. высоту height:234px, пожалуй, не стоит менять на меньшую, иначе может появиться полоса прокрутки. Но если она вам мешать не будет, можно поэкспериментировать.

Как всё это реализовать. Копируем выбранный код, заходим во вкладку шаблон - изменить HTML находим всем знакомую строку ]]></b:skin> (читаем как это просто сделать здесь) и сохраняем. Вуаля. Бегите и любуйтесь тем, что сотворили.

Думаю, что если оформить одинаково и окно формы создания комментариев и окно формы отправки, будет вполне симпатично. Попробуйте сами. Можно украсить таким образом блог к любым праздником, подобрав соответствующую фоновую картинку.

Введите Ваш email