Blogger. Comment style

Dr.AKULAvich

2008-10-08

Как оказалось, преобразить внешний вид блога — это еще ~~полбеды~~ половина дела, куда труднее привести его к желаемому виду. Особенно, если знания html/CSS начинаются и заканчиваются в окрестностях «Скопировать блок A. Вставить A между тегами B». А ведь так хочется сделать лучше, и чтобы получилось не как всегда.

С момента публикации «Перекройка шаблона Blogger или N шагов к настоящему» произошли как несущественные (форма подписки по e-mail была заменена на лаконичный конверт справа от иконки RSS, footer сообщений напоминает о подписке на обновления, размеры шрифтов элементов), так и значимые изменения. О последнем подробнее: мне не нравился вид комментариев к посту, потому что они не имели четкой границы и портили вид пиктограммами сервиса. Согласитесь, удобство чтения комментариев не последний фактор usability. У virens'a сразу после статьи порой можно прочитать еще несколько, созданных читателями :-) Далее идет описание последнего марш-броска с напильником.

С инструментом наперевес отправляемся по лестнице «Макет — изменить HTML». Сохраняем текущий шаблон во избежание неприятных казусов.

В секцию 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 {
  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;
}

Чтобы избавиться от иконок рядом с ником комментатора, активируйте checkbox «Расширить шаблоны виджета» и замените
```
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> 
```
на
```
 <dt class='comment-author' expr:id='data:comment.anchorName'>
```
Если вы переместите конструкцию
```
<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-его шага, то ссылка с датой комментария расположится напротив имени комментатора.

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