
Вот что у нас измениться и добавится в результате.
Ссылки Ответить и Удалить оформлены в виде кнопок.
Оформлена дата отправки комментария.
Красиво оформлен блок самого комментария.
Иконка автора блога.
Ну и прошу вас перейти
Ещё статьи по теме.
Дизайн окна формы создания комментариев.
Изменить дизайн комментариев в блоге.
Оригинальный стиль комментариев в блоге.
В коде я отметила селекторы всех блоков пояснительным текстом. Здесь вы можете поменять практически все стили, чтобы сделать уникальный дизайн ваших комментариев.
Код.
.comments .comments-content .icon,
.comments .comments-content .icon.blog-author {
display:none;
width:0px;
}
.comments .comments-content .icon,
.comments .comments-content .icon.blog-author {
display:none;
width:0px;
}
.comments .comments-content .user.blog-author a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAp0lEQVR4XmMgCdRK1EfXx9XI45CuS2n43vAfCH/XV2KTNm/4C5SEwjo/DAX1s4ASCLgJQ0HDJhQFpzEU1LcgK6ifi+kDyYbXcAVf6jWwOVO74XDDP6Duc3UWmLLcDN0MsQzMlQKVQgyMDP5AHi+yNCfDcYb/QPiUYSPDOob7YPZpBi6EgnagJCbsgUnzMnzGquAbgwBEgR9QAjsMhSjQY8jDAQ0ZCAMA7Ct83ZRitFEAAAAASUVORK5CYII=) 0 0 no-repeat;
color: #000;
padding: 0 0 0 20px;
}
/* стили всего блока; */
.comments {
background:#F5F5DC ;
border: 1px solid #8A8A8A;
border-radius: 3px;
padding: 10px;
margin: 10px 0;
}
/* стили блока опубликованного комментария */
.comment-block{
position: relative;
background: #ffffff;
border-radius: 5px;
border: 1px solid #cbc8e6;
box-shadow: 2px 2px 10px 1px #666;
color: #000;
padding: 7px;
height: 100%;
}
.comment-block:after, .comment-block:before {
right: 100%;
border-style: solid;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.comment-block:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 10px;
top: 26px;
margin-top: -10px;
}
.comment-block:before {
border-color: rgba(203, 200, 230, 0);
border-right-color: #cbc8e6;
border-width: 11px;
top: 26px;
margin-top: -11px;
}
.comment-content {
font: normal normal 15px Tahoma, sans-serif;
padding: 5px 7px;
}
/* дата отправки комментария*/
.comments .datetime a {
background: #F0F0F0;
color: #000;
border: 1px solid #A1A1A1;
border-radius: 5px;
font: normal normal 90% Tahoma, sans serif;
padding: 3px;
}
/* кнопка ответы (развернуть-свернуть) */
.thread-toggle {
background: #CFCFCF;
color:#FFFFF0
border: 1px solid #666666 ;
border-radius: 5px;
font: normal bold 100% sans-serif;
height: 15px;
padding: 5px;
width: auto;
margin: 0px;
}
.thread-toggle a {
color: #FFF ;
}
/*кнопки ссылок "Ответить" и "Добавить комментарий";*/
.comments .continue a {
display: block;
background:width: 150px; ;
background: -moz-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D3D3D3 ), color-stop(100%,#BEBEBE));
background: -webkit-linear-gradient(top, #D3D3D3 0%,#BEBEBE 100%);
background: -o-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
background: -ms-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
background: linear-gradient(to bottom, #D3D3D3 0%, #BEBEBE100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D3D3D3 ', endColorstr='#BEBEBE ',GradientType=0 );
color: #FFFFF0;
text-align: center;
border: 1px solid #666666;
border-radius: 5px;
font-size: 12px;
padding: 10px 5px;
margin: 5px;
height: 100%
}
.comments .continue a:hover {
background: #cecece;
background: -moz-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%, #BEBEBE));
background: -webkit-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: -o-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: -ms-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: linear-gradient(to bottom, #cecece 0%, #BEBEBE100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#BEBEBE ',GradientType=0 );
border: 1px solid #6d6d6d ;
color: #000;
}
.comments .continue {
border: 0;
width: 100px;
width: 200px;
}
.comments .datetime a:hover,
.thread-toggle a:hover,
.continue a:hover {
text-decoration: none;
}
.blogger-comment-from-post {
height: 260px;
}
.comments .avatar-image-container {
border: 1px solid #ccc;
border-radius: 5px;
margin: 0 0 0 -5px;
max-height: 48px !important;
width: 48px !important;
}
.comments .avatar-image-container img {
height: 48px !important;
min-width: 48px !important;
}
.comment-actions a {
background: #8e8e8e;
background: -moz-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#BEBEBE));
background: -webkit-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
background: -o-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
background: -ms-linear-gradient(top, #8e8e8e 0%,#BEBEBE 100%);
background: linear-gradient(to bottom, #8e8e8e 0%,#BEBEBE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#BEBEBE ',GradientType=0 );
border: 1px solid #8A8A8A;
border-radius: 5px;
color: #F8F8F8;
text-align: center;
tex-shadow: 1px 1px 1px #000;
font: normal bold 100% Tahoma, sans-serif;
padding: 5px;
margin: 5px;
}
.comment-actions a:hover {
background: #e0e0e0;
background: -moz-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%, #BEBEBE));
background: -webkit-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: -o-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: linear-gradient(to bottom, #e0e0e0 0%,#BEBEBE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#BEBEBE ',GradientType=0 );
border: 1px solid #7F7F7F;
color: #000;
text-decoration: none !important;
text-shadow: 1px 1px 1px #fff;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
.comments .comments-content .icon.blog-author {
display:none;
width:0px;
}
.comments .comments-content .icon,
.comments .comments-content .icon.blog-author {
display:none;
width:0px;
}
.comments .comments-content .user.blog-author a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAp0lEQVR4XmMgCdRK1EfXx9XI45CuS2n43vAfCH/XV2KTNm/4C5SEwjo/DAX1s4ASCLgJQ0HDJhQFpzEU1LcgK6ifi+kDyYbXcAVf6jWwOVO74XDDP6Duc3UWmLLcDN0MsQzMlQKVQgyMDP5AHi+yNCfDcYb/QPiUYSPDOob7YPZpBi6EgnagJCbsgUnzMnzGquAbgwBEgR9QAjsMhSjQY8jDAQ0ZCAMA7Ct83ZRitFEAAAAASUVORK5CYII=) 0 0 no-repeat;
color: #000;
padding: 0 0 0 20px;
}
/* стили всего блока; */
.comments {
background:#F5F5DC ;
border: 1px solid #8A8A8A;
border-radius: 3px;
padding: 10px;
margin: 10px 0;
}
/* стили блока опубликованного комментария */
.comment-block{
position: relative;
background: #ffffff;
border-radius: 5px;
border: 1px solid #cbc8e6;
box-shadow: 2px 2px 10px 1px #666;
color: #000;
padding: 7px;
height: 100%;
}
.comment-block:after, .comment-block:before {
right: 100%;
border-style: solid;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.comment-block:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 10px;
top: 26px;
margin-top: -10px;
}
.comment-block:before {
border-color: rgba(203, 200, 230, 0);
border-right-color: #cbc8e6;
border-width: 11px;
top: 26px;
margin-top: -11px;
}
.comment-content {
font: normal normal 15px Tahoma, sans-serif;
padding: 5px 7px;
}
/* дата отправки комментария*/
.comments .datetime a {
background: #F0F0F0;
color: #000;
border: 1px solid #A1A1A1;
border-radius: 5px;
font: normal normal 90% Tahoma, sans serif;
padding: 3px;
}
/* кнопка ответы (развернуть-свернуть) */
.thread-toggle {
background: #CFCFCF;
color:#FFFFF0
border: 1px solid #666666 ;
border-radius: 5px;
font: normal bold 100% sans-serif;
height: 15px;
padding: 5px;
width: auto;
margin: 0px;
}
.thread-toggle a {
color: #FFF ;
}
/*кнопки ссылок "Ответить" и "Добавить комментарий";*/
.comments .continue a {
display: block;
background:width: 150px; ;
background: -moz-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D3D3D3 ), color-stop(100%,#BEBEBE));
background: -webkit-linear-gradient(top, #D3D3D3 0%,#BEBEBE 100%);
background: -o-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
background: -ms-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
background: linear-gradient(to bottom, #D3D3D3 0%, #BEBEBE100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D3D3D3 ', endColorstr='#BEBEBE ',GradientType=0 );
color: #FFFFF0;
text-align: center;
border: 1px solid #666666;
border-radius: 5px;
font-size: 12px;
padding: 10px 5px;
margin: 5px;
height: 100%
}
.comments .continue a:hover {
background: #cecece;
background: -moz-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%, #BEBEBE));
background: -webkit-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: -o-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: -ms-linear-gradient(top, #cecece 0%, #BEBEBE100%);
background: linear-gradient(to bottom, #cecece 0%, #BEBEBE100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#BEBEBE ',GradientType=0 );
border: 1px solid #6d6d6d ;
color: #000;
}
.comments .continue {
border: 0;
width: 100px;
width: 200px;
}
.comments .datetime a:hover,
.thread-toggle a:hover,
.continue a:hover {
text-decoration: none;
}
.blogger-comment-from-post {
height: 260px;
}
.comments .avatar-image-container {
border: 1px solid #ccc;
border-radius: 5px;
margin: 0 0 0 -5px;
max-height: 48px !important;
width: 48px !important;
}
.comments .avatar-image-container img {
height: 48px !important;
min-width: 48px !important;
}
.comment-actions a {
background: #8e8e8e;
background: -moz-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#BEBEBE));
background: -webkit-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
background: -o-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
background: -ms-linear-gradient(top, #8e8e8e 0%,#BEBEBE 100%);
background: linear-gradient(to bottom, #8e8e8e 0%,#BEBEBE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#BEBEBE ',GradientType=0 );
border: 1px solid #8A8A8A;
border-radius: 5px;
color: #F8F8F8;
text-align: center;
tex-shadow: 1px 1px 1px #000;
font: normal bold 100% Tahoma, sans-serif;
padding: 5px;
margin: 5px;
}
.comment-actions a:hover {
background: #e0e0e0;
background: -moz-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%, #BEBEBE));
background: -webkit-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: -o-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
background: linear-gradient(to bottom, #e0e0e0 0%,#BEBEBE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#BEBEBE ',GradientType=0 );
border: 1px solid #7F7F7F;
color: #000;
text-decoration: none !important;
text-shadow: 1px 1px 1px #fff;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
Меняйте на свои значения все стили background:( фоновый цвет), color:(цвет текста, border: (ширина и цвет рамки кнопок и блока реплик), меняйте свойства CSS градиент, border-radius:( закругление углов) - если уберёте из кода совсем эти строки, то кнопки и блоки будут с прямыми углами.
Здесь вообще просто, как говорится, лишь бы фантазии хватило. Форму отправки комментария можно растянуть на всю ширину, изменив значение
.blogger-comment-from-post {
height: 260px;
Идём в админ. панель - настройки - шаблон - HTML. Находим строку ]]></b:skin> и над ней устанавливаем готовый код. Сохраняем.
Комментарии являются очень важным элементом любого блога и вы можете порадовать своих читателей таким оригинальным стилем всего блока комментариев.
Если возникнут вопросы по теме - пишите.
Спасибо, что заглядываете в мои шпаргалки и до новых встреч. Удачи вам.
здесь можно оформить подписку на новые шпаргалки
Виктория, спасибо, что подписались на мои блоги "Волшебный фонарик" и Блог Кота Васьки! Стиль комментариев здорово! Вы настоящая волшебница! Но все, что вы придумываете невозможно поставить на блог!
ОтветитьУдалитьМы вроде были уже на "ты"!!! Сейчас прочитала комментарий свой и заметила ошибку!!!
ОтветитьУдалитьИрина, привет. Конечно всё не впихнуть, да и не надо. Многие, сколько ведут блоги
ОтветитьУдалитьстолько и меняют дизайн. Может кому-то и пригодится. на "ты" да. вчера не лёгкий день был, запарилась.
Красота!
ОтветитьУдалитьНаташа, тут ещё и сложного ничего нет. И оригинально и скрипт лёгкий.
ОтветитьУдалитьПосле изменений комментарии смотрятся намного приятней. Хорошая подсказка.
ОтветитьУдалитьДа, Александр. Со стилями комментариев Блоггер можно играться до неузнаваемости.
УдалитьКак это сделать? ( Ничего не получается!!!
ОтветитьУдалить