Всем доброго времени суток. Сегодня предлагаю вам шпаргалку, как изменить дизайн окна (формы) создания комментариев. Многие блогеры пользуются ей. У меня на этом блоге она не установлена, может быть пока дожидается своего часа. Кто не совсем понимает о чём идёт речь, загляните в админ. панель блога-настройки-сообщения и комментарии.
И в самом низу страницы есть такая опция.
Она не очень приглядная и, скорее всего, многие вообще не обращают на неё внимание. Вот, как-то так она выглядит. Текст сочиняете сами.
С помощью небольших изменений в шаблоне, попробуем ей придать привлекательности. Сразу в глаза бросается.
Поменять стили на свои не составит особого труда и тогда окно формы создания комментариев прекрасно впишется под любой дизайн.
Заходим во вкладку шаблон и обязательно делаем резервную копию. С помощью клавиш Ctrk+F находим вот такую строчку.
Обратите внимание, что таких строчек две и расположены они недалеко друг от друга.
Каждую из них аккуратно удаляем и на их место вставляем вот такую строку.
Теперь там же в шаблоне находим уже знакомую всем строку ]]></b:skin> и над ней устанавливаем следующий код.
И в самом низу страницы есть такая опция.
Она не очень приглядная и, скорее всего, многие вообще не обращают на неё внимание. Вот, как-то так она выглядит. Текст сочиняете сами.
С помощью небольших изменений в шаблоне, попробуем ей придать привлекательности. Сразу в глаза бросается.
Поменять стили на свои не составит особого труда и тогда окно формы создания комментариев прекрасно впишется под любой дизайн.
Заходим во вкладку шаблон и обязательно делаем резервную копию. С помощью клавиш Ctrk+F находим вот такую строчку.
<p><data:blogCommentMessage/></p>
Каждую из них аккуратно удаляем и на их место вставляем вот такую строку.
<div id='pra-comment'><data:blogCommentMessage/></div>
Теперь там же в шаблоне находим уже знакомую всем строку ]]></b:skin> и над ней устанавливаем следующий код.
#pra-comment{
position: relative;
background:#F3C5C5;
width:100%;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #AD3000;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #AD3000;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #F3C5C5; /* цвет такой же, как цвет общего фона. */
border-width: 9px;
left: 10%;
margin-left: -30px
}
position: relative;
background:#F3C5C5;
width:100%;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #AD3000;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #AD3000;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #F3C5C5; /* цвет такой же, как цвет общего фона. */
border-width: 9px;
left: 10%;
margin-left: -30px
}
Цветовые решения - на ваше усмотрение. Можно форму сделать вообще без фона в одной рамочке. Поменяйте значение background:#F3C5C5; на background:none;
После всех изменений в шаблоне нажмите на кнопку просмотр и если нет никаких предупреждений сохраняйте изменения.
Вот так, без особых хлопот поменяли и приукрасили дизайн блога. Ваши посетители обязательно теперь обратят внимание на такое окно.
А здесь весёлые смайлики для комментариев.
И у меня сегодня всё. Спасибо, что читаете мои шпаргалки. До встречи.
После всех изменений в шаблоне нажмите на кнопку просмотр и если нет никаких предупреждений сохраняйте изменения.
Вот так, без особых хлопот поменяли и приукрасили дизайн блога. Ваши посетители обязательно теперь обратят внимание на такое окно.
А здесь весёлые смайлики для комментариев.
И у меня сегодня всё. Спасибо, что читаете мои шпаргалки. До встречи.
здесь можно оформить подписку на новые шпаргалки
Классно выглядит!
ОтветитьУдалитьСпасибо, Наталья.
Удалить