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


Привет, друзья. В своё время я писала пост, как с помощью 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


11 комментариев:

  1. Виктория, конечно, это очень красиво! Особенно последний вариант! Я в комментариях вообще ничего не меняла. В выходные почитаю твой блог, сделаю на тестовом блоге. Если все получится, можно и попробовать!

    ОтветитьУдалить
    Ответы
    1. Ирина, попробуй конечно. У меня на домашнем стоит оформленное окно формы создания комментариев.

      Удалить
  2. Вика. Как вариант, мило. Сразу хочется в этой симпатичной форме написать комментарий. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Хочу попробовать оба варианта реализовать, что получится.

      Удалить
  3. Вика. С праздником весны https://i.mycdn.me/image?id=852570736290&t=3&plc=WEB&tkn=*G3KStvqZJvJHXPcnWE1PXSlrdEc Пусть все будет замечательно!

    ОтветитьУдалить
    Ответы
    1. Люба спасибо. Взаимно. Всё так и будет. Ссылка у меня не сработала.

      Удалить
    2. Подозревала такой вариант, хотя у меня всё сработало. Тогда эта ссылочка http://00149.blogspot.ru/2017/03/blog-post.html Всяких тебе "приятностеЙ"

      Удалить
  4. Вика! Большущее вам СПАСИБО!!! После такого подробного объяснения всё нашлось и получилось! А ещё ОГРОМНОЕ СПАСИБО за мою победу в конкурсе "Лучший интернет-ресурс". Это всё благодаря ВАМ, МОЙ УЧИТЕЛЬ!

    ОтветитьУдалить
    Ответы
    1. Светлана, я Вас поздравляю. И Вам спасибо. Какой я учитель я просто делюсь опытом и знаниями с удовольствием.

      Удалить

Пользовательский поиск
Foto Saya
My Photo