el_murid (el_murid) wrote,
el_murid
el_murid

Область коментариев

Здесь более подробно рассмотрим ряд вопросов - для наглядности, с помощью инспектора объектов.



Заголовок коментариев - класс .body-midtitle



Сейчас мы видим, что область заголовка коментариев, благополучно заполнена заливкой класса .bodyheaderblock
В этом макете, классы .bodyheaderblock и .body-midtitle, расположены один над другим.



Нетрудно догадаться,  что эту область нужно перекрыть сверху, с помощью объекта класса .body-midtitle



Заливаем фон уже имеющимся изображением и прилепляем иконку к верхней границе объекта. Если нужно, делаем заголовок коментариев жирным шрифтом - font-weight: bold;

.body-midtitle {
line-height: 24px;
font-family: ;
font-weight: normal;
color: #afb5ad;
font-size: 12px;
padding: 4px 10px 4px 40px;
margin: 10px 0px 10px 0px;
border: 0px inset #afb5ad;
background: url(http://pics.livejournal.com/tastytheme/pic/0004a3cs)10px 0px no-repeat,
url(http://pics.livejournal.com/tastytheme/pic/00031tk3);
-webkit-box-shadow: 0px 0px 1px 0px #FFF inset; 
-moz-box-shadow: 0px 0px 1px 0px #FFF inset; 
box-shadow: 0px 0px 1px 0px #FFF inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}



Общая область коментариев - класс .commentHolder



Здесь указываем внешний отступ между блоками каждого коментария и внутренний отступ по вертикали, чтобы содержание не прилипало к границам объекта. Задаем легкое оттенение от фона.

.commentHolder {
color: #424242;
background: #E1E7DB;
border: 6px solid #D4DACE;
font-family: ;
font-size: 12px;
padding: 0px 8px 0px 8px;
margin: 12px 0px 0px 0px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3451);
}


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



Установка параметров юзерпика, где можно указать цвет шрифта, отступы и цвет заливки фона для совпадения с фоном коментариев. В большинстве случаев фон лучше устанавливать прозрачным.Указываем размер рамки для юзерпика.

.commentUserinfo {
background: transparent;
text-align: center;
margin: 0px 8px 8px 0px;
}
.commentUserinfo-usericon img {
border: 3px solid #f4f4f4;
}

Под юзерпиком указываем цвет шрифта. Я еще убираю подчеркивание ссылки под шрифтом.

.commentUserinfo-username, .ljuser a { 
color: #777;
text-decoration: none;
}

На наведение курсора мыши, меняем цвет шрифта и делаем небольшой эффект затухания, чтобы цвета плавно менялись.
.commentUserinfo-username  a:hover { 
color: #999;
-webkit-transition:all .7s ease;
-moz-transition:all .7s ease;
-o-transition:all .7s ease;
transition:all .7s ease;
}

Пришлось в срочном порядке причесывать страницу для сообщества hammad-al-nakir.livejournal.com
Там есть примеры затухания ссылок.


Устанавливаем отступы для текста самого коментария.



.commentText { 
margin: 0px 16px;
padding: 6px 16px 10px 6px;
}

И наконец оформляем нижнюю часть области коментария.
Класс - .commentLinkbar


.commentLinkbar {
font-family: Arial ;
font-size: 10px;
}

.commentLinkbar ul {
margin: 0px;
padding: 0px;
}

Рисуем кнопки под текст и описываем поведение объекта на наведение курсора мыши.

.commentLinkbar li {
display: inline-block;
padding: 2px 4px 4px 4px;
margin: 0px 2px 0px 0px;
background-color: #fcfcfc;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #7C7D5A;
opacity: 0.5;
text-shadow: 1px 1px #FFFFFF;
-webkit-box-shadow: 0px 0px 1px 0px #000 inset;
-moz-box-shadow: 0px 0px 1px 0px #000 inset;
box-shadow: 0px 0px 1px 0px #000 inset;
}

.commentLinkbar a:hover{
background-color: #fcfcfc;
color: #7C7D5A;
opacity: 0.5;
text-shadow: 1px 1px #FFFFFF;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
transition: .7s;
}


Далее о самих формах заполнения коментариев. Здесь http://tastytheme.livejournal.com/31846.html#comments их можно посмотреть в действии, попробовав оставить коментарий. Сам коментарий оставлять не нужно. Достаточно только вызвать форму.

Subscribe

Recent Posts from This Journal

  • Принуждение vs убеждение

    Что достаточно удивительно в непрекращающемя терроре с целью заставить людей вакцинироваться — так это почти полный отказ от метода убеждения в…

  • Пауэлл

    Колин Пауэлл, бывший госсекретарь США, скончался в возрасте 84 лет. Называется стандартная причина - от ковида. Правда, в 84 года умереть можно от…

  • Закрытие представительства

    Россия с 1 ноября приостанавливает работу своего представительства при НАТО. Об этом сообщил министр Лавров. Дело, конечно, житейское. Вот только не…

  • Post a new comment

    Error

    Comments allowed for friends only

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 2 comments