Blogger. Comment style

Как оказалось, преобразить внешний вид блога — это еще полбеды половина дела, куда труднее привести его к желаемому виду. Особенно, если знания html/CSS начинаются и заканчиваются в окрестностях «Скопировать блок A. Вставить A между тегами B». А ведь так хочется сделать лучше, и чтобы получилось не как всегда.
С момента публикации «Перекройка шаблона Blogger или N шагов к настоящему» произошли как несущественные (форма подписки по e-mail была заменена на лаконичный конверт справа от иконки RSS, footer сообщений напоминает о подписке на обновления, размеры шрифтов элементов), так и значимые изменения. О последнем подробнее: мне не нравился вид комментариев к посту, потому что они не имели четкой границы и портили вид пиктограммами сервиса. Согласитесь, удобство чтения комментариев не последний фактор usability. У virens'a сразу после статьи порой можно прочитать еще несколько, созданных читателями :-)
Далее идет описание последнего марш-броска с напильником.
1. С инструментом наперевес отправляемся по лестнице «Макет — изменить HTML». Сохраняем текущий шаблон во избежание неприятных казусов.
2. В секцию Comments вносим css-верстку. У меня так:

/* Comments
----------------------------------------------- */
#comments h4 {

}

.comment-author {
  background-image: none;  
  background-color: #f3f3f3;  
  margin-bottom: 0px;  
  padding: 6px 0 6px 10px;  
  border: 1px solid #ccc;  
  border-bottom: 1px solid #FFF7CF;
}

.comment-body p {
  font-size: 14px;
  background-color: #eaeaea;
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 10px;  
  border: 1px solid#ccc;  
  border-top: 1px solid #CBC4AC;  
}

.comment-timestamp {
   float: right;
   margin: 0 10px 0 0;
}

3. Чтобы избавиться от иконок рядом с ником комментатора, активируйте checkbox «Расширить шаблоны виджета» и замените

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

на

<dt class='comment-author' expr:id='data:comment.anchorName'>

4. Если вы переместите конструкцию

<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

сразу после строки из 3-его шага, то ссылка с датой комментария расположится напротив имени комментатора.

Если понадобится выделить ответы автора, присмотритесь к данному трюку.
На этом алгоритм завершается. До новых встреч! :)

Tweet