Blogger не прави изключение и позволява това. Познавайки основните селектори на блоковите елементи можете да добавите свои CSS свойства към тях и лесно да промените дизайна на коментарите в блога на Blogger.
В тази публикация ще намерите готов шаблон за стила на коментарите, за да можете лесно и бързо да направите необходимите промени в дизайна им. Тук са описани селекторите, както и пример за стил и дизайн на дървовидни коментари.
Ако искате да промените стила на обикновените коментари, а не дървовидните, прегледайте тези две публикации.
Блокът за коментарите съдържа няколко елемента, в оформлението на които можете да участвате с CSS. А именно:
.comments - е общият селектор на целия блок;
.comment-block - е селекторът на публикуваното съобщение;
.comment-content - е селекторът на блока с текст за коментари;
.datetime - е селекторът на датата на изпращане на отзивите. Тук е по-добре да използвате свойствата на стила за .datetime a;
.thread-switch - е селекторът на бутона "Отговори" (разгъване / свиване). Освен това, за дизайна можете да използвате и хипервръзка в този елемент: .thread-toggle a;
. continue - е селекторът на хипервръзките "Отговор" и "Добавяне на коментар";
Тук е правилно да се използва CSS стил за хипервръзката в този елемент - .continue a, а не за елемента .continue.
И по-нататък:
.blogger-comment-from-post – е селекторът за формата на изпращане на коментара. Можете да я разтегнете на цялата ширина на блока, като добавите съответното му значение. Можете и да я премахнете, използвайки свойствата на фона.
h4 - е заглавка от 4-ти порядък. В стандартните теми на Blogger определя надписа "Изпрати коментар" и техния брой.
h4 - е заглавка от 4-ти порядък. В стандартните теми на Blogger определя надписа "Изпрати коментар" и техния брой.
Познавайки действието на тези селектори можете практически без проблем да добавите CSS и да промените дизайна на всички елементи в блока на коментарите.
Ето и готов CSS пример за изменение на коментарите в Blogger, с елементарно оформление на елементите, така че лесно да промените дизайна според вашите предпочитания.
.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: #eee;
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;
border: 2px solid #737373;
border-radius: 5px;
font: normal bold 100% sans-serif;
height: 15px;
padding: 5px;
width: auto;
margin: 0px;
}
.thread-toggle a {
color: #000;
}
.comments .continue a {
display: block;
background: #666666;
background: -moz-linear-gradient(top, #666666 0%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #666666 0%,#131313 100%);
background: -o-linear-gradient(top, #666666 0%,#131313 100%);
background: -ms-linear-gradient(top, #666666 0%,#131313 100%);
background: linear-gradient(to bottom, #666666 0%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',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%, #6d6d6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%,#6d6d6d));
background: -webkit-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
background: -o-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
background: -ms-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
background: linear-gradient(to bottom, #cecece 0%,#6d6d6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#6d6d6d',GradientType=0 );
border: 1px solid #6d6d6d ;
color: #000;
}
.comments .continue {
border: 0;
width: 100px;
}
.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%, #5c5c5c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#5c5c5c));
background: -webkit-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
background: -o-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
background: -ms-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
background: linear-gradient(to bottom, #8e8e8e 0%,#5c5c5c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#5c5c5c',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%, #969696 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#969696));
background: -webkit-linear-gradient(top, #e0e0e0 0%,#969696 100%);
background: -o-linear-gradient(top, #e0e0e0 0%,#969696 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%,#969696 100%);
background: linear-gradient(to bottom, #e0e0e0 0%,#969696 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#969696',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 .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: #eee;
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;
border: 2px solid #737373;
border-radius: 5px;
font: normal bold 100% sans-serif;
height: 15px;
padding: 5px;
width: auto;
margin: 0px;
}
.thread-toggle a {
color: #000;
}
.comments .continue a {
display: block;
background: #666666;
background: -moz-linear-gradient(top, #666666 0%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #666666 0%,#131313 100%);
background: -o-linear-gradient(top, #666666 0%,#131313 100%);
background: -ms-linear-gradient(top, #666666 0%,#131313 100%);
background: linear-gradient(to bottom, #666666 0%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',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%, #6d6d6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%,#6d6d6d));
background: -webkit-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
background: -o-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
background: -ms-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
background: linear-gradient(to bottom, #cecece 0%,#6d6d6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#6d6d6d',GradientType=0 );
border: 1px solid #6d6d6d ;
color: #000;
}
.comments .continue {
border: 0;
width: 100px;
}
.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%, #5c5c5c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#5c5c5c));
background: -webkit-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
background: -o-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
background: -ms-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
background: linear-gradient(to bottom, #8e8e8e 0%,#5c5c5c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#5c5c5c',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%, #969696 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#969696));
background: -webkit-linear-gradient(top, #e0e0e0 0%,#969696 100%);
background: -o-linear-gradient(top, #e0e0e0 0%,#969696 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%,#969696 100%);
background: linear-gradient(to bottom, #e0e0e0 0%,#969696 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#969696',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;
}
В посочения пример са променени:
- датата на коментара;
- хипервръзките "Отговор" и "Изтриване" са оформени като бутони;
- за фон е използван градиент на CSS;
- добавен е ъгъл в блока на отговор, направен под формата на "словесен балон" и сянка;
- иконата за коментарите на автора на блога е заменена;
- размерите на аватарите са увеличени;
В този стил са използвани само бял и нюанси на черен цвят, като всеки от вас може самостоятелно да избере подходящите за себе си.
Това е всичко. Мнения и предложения, както винаги, можете да дадете, като използвате формата по-долу.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Продължаваме
Няма коментари:
Публикуване на коментар