Всем, привет. Давно ничего не писала про оформление комментариев. Привычно скучную полосу комментариев можно стилизовать на разные вкусы. Смотря что вы хотите видеть на вашем блоге.
Можно изменить дизайн комментариев блога на совершенно оригинальный вариант. Или хотя бы изменить дизайн окна формы создания у них. Можно нумерацию к каждому комментарию добавить.
Сегодня мы разукрасим разным фоновым цветом отдельные блоки в комментариях. Примерно так, как вы видите на картинке. Я специально сделала контрастные цвета, чтобы было более понятно, как это выглядит.

Наглядно посмотреть можно на тестовом блоге
Настройка и реализация до безобразия простая. Даже начинающие вести блог легко с этим справится.
Это код, который нужно скопировать.
<style>
.comments .comment .comment-actions a, .comments .continue a {box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
border: 1px solid #DDD;
margin: 0 2px; text-decoration: none; border-radius: 4px; text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif; padding: 2px 10px; white-space: nowrap; vertical-align: middle; color: #666; background: -webkit-linear-gradient(top, #fbfaf8, gainsboro); background: -moz-linear-gradient(top, #fbfaf8, gainsboro); background: -ms-linear-gradient(top, #fbfaf8, gainsboro); background: -o-linear-gradient(top, #fbfaf8, gainsboro); text-transform: lowercase;}
.comments .comment .comment-actions a:hover, .comments .continue a:hover { box-shadow: inset 0 1px 2px #c4c4c4; border: 1px solid #AAA; border-top-color: #999; text-decoration: none;}
.thread-toggle { border-radius: 4px 4px 0 0; border-top: 2px solid $(link.hover.color); text-shadow: 0 1px 1px white; font: bold 11px Sans-Serif; padding: 2px 10px; white-space: nowrap; vertical-align: middle; color: #666; text-transform: lowercase;}
.thread-toggle a{text-decoration: none;}
.comments .continue a { float: right; border-radius: 0 0 4px 4px;}.comments .comments-content .avatar-image-container{border: 4px solid #fcfbf5;border-radius: 5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;} .comments .comments-content .comment-thread ol li, .comments .comments-content .comment-thread ol li ol li{ border: 1px groove #acacac; padding: 10px; border-radius: 5px; box-shadow: -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);}
.comments .comments-content .comment-thread ol li:last-child { padding-bottom: 5px; }
.comments .comments-content .comment-thread ol li:nth-of-type(even) { background: #FFDAB9; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #D2B48C; }
.comments .comments-content .comment-thread ol li ol li:nth-of-type(odd), .comments .comments-content .comment-thread ol li ol li:nth-of-type(even){ background: #87CEFA; }</style>
.comments .comment .comment-actions a, .comments .continue a {box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
border: 1px solid #DDD;
margin: 0 2px; text-decoration: none; border-radius: 4px; text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif; padding: 2px 10px; white-space: nowrap; vertical-align: middle; color: #666; background: -webkit-linear-gradient(top, #fbfaf8, gainsboro); background: -moz-linear-gradient(top, #fbfaf8, gainsboro); background: -ms-linear-gradient(top, #fbfaf8, gainsboro); background: -o-linear-gradient(top, #fbfaf8, gainsboro); text-transform: lowercase;}
.comments .comment .comment-actions a:hover, .comments .continue a:hover { box-shadow: inset 0 1px 2px #c4c4c4; border: 1px solid #AAA; border-top-color: #999; text-decoration: none;}
.thread-toggle { border-radius: 4px 4px 0 0; border-top: 2px solid $(link.hover.color); text-shadow: 0 1px 1px white; font: bold 11px Sans-Serif; padding: 2px 10px; white-space: nowrap; vertical-align: middle; color: #666; text-transform: lowercase;}
.thread-toggle a{text-decoration: none;}
.comments .continue a { float: right; border-radius: 0 0 4px 4px;}.comments .comments-content .avatar-image-container{border: 4px solid #fcfbf5;border-radius: 5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;} .comments .comments-content .comment-thread ol li, .comments .comments-content .comment-thread ol li ol li{ border: 1px groove #acacac; padding: 10px; border-radius: 5px; box-shadow: -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);}
.comments .comments-content .comment-thread ol li:last-child { padding-bottom: 5px; }
.comments .comments-content .comment-thread ol li:nth-of-type(even) { background: #FFDAB9; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #D2B48C; }
.comments .comments-content .comment-thread ol li ol li:nth-of-type(odd), .comments .comments-content .comment-thread ol li ol li:nth-of-type(even){ background: #87CEFA; }</style>
Розовым я выделила 3 цвета для данного примера. Можно подобрать оттенки определённого цвета под индивидуальный дизайн. Сделать ярче или приглушённее цветовую гамму. В помощь вам эта таблица цветов HTML. Кто разбирается в стилях CSS тут целое поле для творчества - шрифты, радиусы, границы, тени и прочее.
Готовый код устанавливаем в разделе дизайн- гаджет HTML/JavaScript. Перетащить его куда - нибудь в самый подвал (футер) блога. Название писать не нужно. И постарайтесь запомнить где он у вас, а вдруг захочется поменять или убрать совсем.
Конечно же, можно было и в самом шаблоне, во вкладке тема перед строкой ]]></b:skin> , но уже без тегов <style> и </style> , но для начинающих немного трудновато, а бывалым - лень. Пусть уж так и будет.
Вот как просто можно разукрасить фон ленты комментариев.
Всем добра и до встречи.
Получайте новые сообщения с блога прямо на почту
Здорово, Виктория! Мне нравится! Спасибо!
ОтветитьУдалитьИрина, да красиво правда. Поэкспериментировать с цветом, вообще здорово будет.
ОтветитьУдалитьПривет, Вика. Так просто, прямо в гаджет? Спасибочки!
ОтветитьУдалитьЛюба, лучше конечно в шаблон, чтоб в гаджетах не запутаться. Ну и так работает.
УдалитьДействительно, красиво! Спасибо, Вика!
ОтветитьУдалитьЛюдмила Фёдоровна, попробуйте, собственно сложного - то и нет ничего. Тут я забыла уточнить, если ничего не меняли раньше св комментариях. Но у Вас на блоге, вроде нет.
УдалитьСпасибо. Очень необычно. Прям как карточки комментарии.
ОтветитьУдалитьСаша, точно. Всё думала на что похоже. Как картотека какая - то. Чего удумал уйти с ВК?
ОтветитьУдалитьПопробовала на тестовом блоге! Очень красиво получилось! Если убрать, то все вернётся назад? Комментарии не пропадут? У меня в Блоге Кота Васьки комментарии сами по себе выделяются цветом (голубой цвет в ответах на комментарии). Я бы этот код взяла для "Волшебного фонарика".
ОтветитьУдалитьВиктория! Вставила код в "Волшебный фонарик"! Как красиво! Комментарии и ответы выделяются! Все сохранилась! Код вставила в футор 2-2. Подальше!
УдалитьВиктория! Приглашаю тебя написать мне комментарий в сегодняшний пост! Как раз посмотришь, что у меня получилось! Как красиво!
Интересно получилось, попробую на каком нибудь блоге.
ОтветитьУдалитьНаталья, пробуйте, авось и приживётся. Убрать всегда можно.
УдалитьВика, спасибо тебе большое за интересные штучки для блогов. Вот, все жду настроя, чтобы ими воспользоваться ))
ОтветитьУдалитьВика, а тут и делать нечего, копируешь готовый код и в гаджет. Всё.
УдалитьИрина, видишь как ярко и весёленько получилось.
ОтветитьУдалитьКрасиво. Но, честно говоря, хоть, видимо, это и просто, как дважды-два, но у меня уже давно это уравнение в результате дает то три, то пять!
ОтветитьУдалитьСемён. Попробуйте скопируйте весь код. Затем в админпанели зайдите во вкладку дизайн и выбирайте гаджет гаджет HTML/JavaScript из предложенного списка. В появившемся окне вставьте скопированный код. Сохраните и всё.
ОтветитьУдалитьЗдравствуйте, Виктория! Спасибо Вам большое за подсказку! Я попробовала для разнообразия, всё получилось)
ОтветитьУдалитьАгния, И для разнообразия хорошо и устанавливается просто. Пользуйтесь.
ОтветитьУдалить