Главная » Файлы » Прочие скрипты » CSS
Стильный вид комментариев для WordPress by Apocalypse
24.10.14, 10:16:42



Пришло время, когда я вплотную занялся проектированием сайтов на WordPress и, думаю, начиная с этого дня, если я буду разрабатывать что-то интересное для этой CMS, опубликую здесь на apo-ucoz. Надеюсь, такие материалы будут пользоваться хорошим спросом

Вот как выглядит модифицированный вид комментариев в итоге:



Установка:

В самый низ вашего css вставляйте:
Код
.comment-author .avatar {
display: block;
margin-bottom: 10px;
}

.comment-author {
float: left;
max-width: 140px;
background: #F3F3F3;
padding: 10px 20px;
border-right: 1px solid #ECECEC;
}

.comment-author .fn {
word-wrap: break-word;
text-align: center;
width: 100%;
display: block;
}

.comment-metadata {
margin-bottom: 20px;
padding: 10px;
}

.comment-meta {
height: 125px;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(219,219,219,0.5) 50%, rgba(209,209,209,0.49) 51%, rgba(254,254,254,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(219,219,219,0.5)), color-stop(51%,rgba(209,209,209,0.49)), color-stop(100%,rgba(254,254,254,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(219,219,219,0.5) 50%,rgba(209,209,209,0.49) 51%,rgba(254,254,254,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(219,219,219,0.5) 50%,rgba(209,209,209,0.49) 51%,rgba(254,254,254,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(219,219,219,0.5) 50%,rgba(209,209,209,0.49) 51%,rgba(254,254,254,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(219,219,219,0.5) 50%,rgba(209,209,209,0.49) 51%,rgba(254,254,254,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#00fefefe',GradientType=1 );
}

.comment-meta, .comment-meta a {
color: #a2a2a2;
font-size: 13px;
}

.bypostauthor > .comment-body .fn:before {
content: '';
}

.comment-content {
float: left;
background: rgba(248, 248, 248, 1);
min-height: 30px;
height: auto;
font-size: 13px;
padding: 5px;
color: #777;
width: 100%;
margin-top: 10px;
background: -moz-linear-gradient(left, rgba(237,237,237,1) 0%, rgba(237,237,237,0.88) 72%, rgba(255,255,255,0.83) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(237,237,237,1)), color-stop(72%,rgba(237,237,237,0.88)), color-stop(100%,rgba(255,255,255,0.83)));
background: -webkit-linear-gradient(left, rgba(237,237,237,1) 0%,rgba(237,237,237,0.88) 72%,rgba(255,255,255,0.83) 100%);
background: -o-linear-gradient(left, rgba(237,237,237,1) 0%,rgba(237,237,237,0.88) 72%,rgba(255,255,255,0.83) 100%);
background: -ms-linear-gradient(left, rgba(237,237,237,1) 0%,rgba(237,237,237,0.88) 72%,rgba(255,255,255,0.83) 100%);
background: linear-gradient(to right, rgba(237,237,237,1) 0%,rgba(237,237,237,0.88) 72%,rgba(255,255,255,0.83) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#d4ffffff',GradientType=1 );
}

.comment-list .reply {
float: left;
width: 79%;
width: -webkit-calc(100% - 124px);
width: calc(100% - 124px);
word-wrap: break-word;
}


Всё! Стилизация готова!

Так как в стандартном css шаблонов на WordPress уже описано большинство свойств элементов, мои стили лишь дополняют и улучшают внешний вид. Если же вы писали свой шаблон с нуля и в css у вас никак не не прописаны css свойства для комментариях - напишите об этом и я внесу коррективы в статью

Материал разработан и подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: Apocalypse, WordPress, вид, Стильный, by, комментариев, для
Просмотров: 652 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: