Как изменить стиль комментариев Blogger

Постоянно возвращаюсь к теме комментариев Blogger, поэтому решила опубликовать ещё одну статью, похожею на "Как сделать один раз на все страницы" про стили CSS. Изменения вносим в шаблон. На самих стилях я не буду подробно останавливаться, а также код покажу в упрощённом виде. На практике посмотрим применение CSS селекторов и посмотрим как использовать CSS.

Без древовидных комментариев

Одновременно разберём как выглядит HTML код отзывов, нажав CTRL+U на странице блога, например, при прочтении данной статьи. Наводите постепенно на один из элементов кода ниже.

Помимо прочего, я, например, прописала стили для имени комментаторов:

#comments-block dt {
text-shadow: 3px 3px 3px #505050;  /* тень у текста */ 
font-size: 14px;  /* размер букв */ 
color: #991500;  /* цвет букв */ 
}

Последние два селектора позволят уменьшить расстояние до конца поля сообщения и увеличить поле ввода комментария:

#comment-editor {
  width: 570px;  /* ширина поля ввода */ 
  height: 210px;   /* высота поля ввода */ 
}

.comment-form {
  height: 280px;  /* общая высота поля ввода */ 
}

Особенный стиль у автора блога.

Как сделать свой стиль для автора блога Blogspot описано на www.southernspeakers.net. Воспользуюсь его вариантом. Внесём изменения, выделенные жирным цветом. При этом b:loop выносим за контейнер dl.

<b:includable id='comments' var='post'>
.......................................
<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
          <b:loop values='data:post.comments' var='comment'>
           <b:if cond='data:comment.author == data:post.author'>
             &lt;div id=&quot;authorcomment&quot;&gt;
           </b:if>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
        </dl>
           &lt;/div&gt;
          </b:loop>
      </div>
.......................................
</b:includable>

Теперь добавляем стиль CSS:

#authorcomment{
background: yellow;
border: 10px double orange;
padding: 4px;
color: black;
}

С древовидными комментариями

У меня фантазии хватило на образец

.comments .comment .comment-actions a, .comments .continue a {
   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-bottom-color: #CCC;
   border-top-color: #999;
   text-decoration: none;}

.thread-expanded {background-color: #fbfaf8;}

.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;}