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

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

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

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


<div id="comments" class="comments">Для всей формы
#comments {}
Для всей формы


<h4>Количество комментариев</h4>Для заголовков числа отзывов и "Отправить комментарий"
#comments h4 {}
Для заголовков числа отзывов и Отправить комментарий


<dl id='comments-block'>Для опубликованных комментариев
#comments-block {}
Для заголовков числа отзывов и Отправить комментарий

<dt class="comment-author blog-author">Для поля с именем комментатора, включает в себя аватарку
#comments-block dt {}
Для имени автора

<div class="avatar-image-container avatar-stock">изображение аватара</div> Для аватара
#comments-block .avatar-image-container {}
Для аватара

НИК комментирует...
</dt>
<dd class="comment-body">текст</dd>Для текста записи
#comments-block .comment-body {}
Для текста сообщения

<dd class="comment-footer">дата, карзина</dd>Для нижней части комментариев
#comments-block .comment-footer {}
Для нижней части комментариев

</dl>

<div class="comment-form">Для формы отправки комментария
.comment-form {}
Для формы отправки комментария

<h4 id="comment-post-message">Отправить комментарий</h4>Для заголовков числа отзывов и "Отправить комментарий"
#comments h4 {}
Для заголовков числа отзывов и Отправить комментарий

<p>несколько приветственных слов</p>Можно ввести несколько вступительных слов перед формой отзывов
.comment-form p{}
Несколько слов

<iframe id="comment-editor"/>И в более узком значении
#comment-editor {}
Для формы отправки комментария

</div>

</div>

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

#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;
}
Свой стиль комментария у автора блога

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


<div id="comments" class="comments">Для всей формы
#comments {}
Форма комментариев


<h4>Количество комментариев</h4>Число комментариев
#comments h4 {}
Число комментариев


<div class="comments-content">Форма комментариев без h4
.comments-content {}
Форма комментариев

  <ol>
    <li>
      <div class="avatar-image-container">изображение аватара</div>Блок аватаров
.avatar-image-container {}
Блок с аватарами

      <div class="comment-block">Блок отзыва без аватара
.comment-block {}
Блок отзыва без аватара

          <div class="comment-header">Верхний блок: НИК, значок карандаша, дата
.comment-header {}

            <cite class="user blog-author"><a>НИК</a></cite>Стиль для НИКа вместе с карандашом
.comment-header .blog-author {}

            <span class="icon user blog-author"/>Стиль для значка карандаша
.comments .comments-content .icon.blog-author {}

            <span class="datetime secondary-text"><a>дата</a></span>Стиль для даты
.comments .comments-content .datetime {}

          </div>
          <blockquote class="comment-content">текст</blockquote>Стиль для текста опубликованных комментариев
.comments .comments-content .comment-content {}

          <span class="comment-actions secondary-text"><a>Ответить</a><a>Удалить</a></span>Кнопки "Ответить", "Удалить"
.comments .comments-content .comment-actions a{}

      </div>
      <div class="comment-thread inline-thread">Блок "Ответить"
.comments .comment-thread.inline-thread {}
Блок Ответить

          <span class="thread-toggle thread-expanded"><a>Ответы</a></span>Кнопка "Ответы"
.thread-toggle {}

          <ol class="thread-chrome thread-expanded">
            <li class="comment">тот же код</li>Каждая запись комментария, находящаяся в блоке "Ответы"
.comments .comments-content .comment-thread ol li ol li {}
Каждая запись комментария, находящаяся в блоке Ответы

          </ol>
      </div>
    </li>
  </ol>
  <div class="continue"><a>Добавить комментарий</a></div>Кнопка "Ответить" под формой "Ответы" и кнопка "Добавить комментарий"
.comments .continue {}

  <iframe id="comment-editor"/>И в более узком значении
#comment-editor {}
Для формы отправки комментария

  <div class="loadmore loaded"><a>Ещё</a></div>
.comments .comments-content .loadmore a {}

</div>

</div>

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

.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;}
в f t
наверх ↑

51 комментарий:

Андрей
Интересно... а как можно еще украсить?
NMitra
Если владеете знаниями относительно CSS, то указать необходимые свойства. Мне трудно догадаться какого результата нужно добиться. Все изменения, предложенные мной, можете увидеть на странице - http://shpargalkablog.ru/2010/10/comments-blogger.html
Евгения
День добрый. А я бы хотела только изменить цвет своих комментариев, более ничего не меняя. Как это сделать?

Спасибо.
NMitra
Правильно ли я поняла: цвет букв отзывов, отправленных от вашего имени?

См. "Особенный стиль у автора блога", только

#authorcomment{
color: #627c4f;
}
Евгения
У меня при попытке изменить авторский стиль шаблон новый не принимается - говорит, не хватает закрывающего тега div
NMitra
Обрати внимание на

</dl>
&lt;/div&gt;
</b:loop>
Евгения
Обратила конечно. Но упёртый гугл говорит, что не закрыт тег...
NMitra
Выделила ещё одну строку жирным - моя оплошность. В коде тег <b:loop> меняем местами с <dl> плюс добавляем <div> с идентификатором id.
Davidenkova Deli
Здравствуйте. Я бы хотела узнать, как разместить ссылку "... комментариев", которая внизу поста, посередине?
Спасибо.
NMitra
Здравствуйте. Ох, совсем ничего не поняла. Ссылку на Главной?

Внизу поста посередине? У меня (10 комментариев или хлебные крошки?) или в статье (какой скриншот)?
Davidenkova Deli
Да, запутанно звучит.
В общем, хотелось бы "передвинуть" ссылку на комментарии внизу каждого поста в блоге на середину страницы. (http://s57.radikal.ru/i155/1201/f9/7cad973a2de4.jpg)
Надеюсь, теперь понятно высказалась.)
NMitra
.post-footer-line-1{
text-align: center;
}

Таких три линии. В разных шаблонах комментарии находятся на различных линиях. Если не поможет, то попробуйте .post-footer-line-2 или .post-footer-line-3
Vladimir Yaritenko
Добрый день! Подскажите пожалуйста, как мне можно решить мою проблему.
у меня в firefox область для комментирования сдвигается вправо
http://img9.imageshack.us/img9/93/firefoxty.jpg

в то время как например в Chromе все впорядке
http://img7.imageshack.us/img7/7669/chromeup.jpg

что можно сделать? подскажите, пожалуйста!
Davidenkova Deli
Спасибо огромное! Всё получилось.
NMitra
Vladimir, добрый день. Как-то мне не там, не там не нравится. Кнопка "ответить" плавает где-то сбоку. С CSS проблема. Что-то конкретного не могу сказать, нужно пробовать "на месте".
Vladimir Yaritenko
Хорошо, я понял! Спасибо за ответ!
illyuziya
Здравствуйте!
Скажите, а можно установить полосу прокрутки для комментариев? Или на всё сообщение, вместе с комментариями? Смысл в том, что бы пост имел фиксированную высоту, в независимости от того, сколько комментариев к нему написано.
Возможно такое?
NMitra
См. http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html#comment - это для не древовидных комментариев.
illyuziya
Спасибо!
Ольга
Познавательно!) Спасибо
NMitra
Приятно слышать, Ольга!
Анонимный
Здравствуйте!
Подскажите пожалуйста, как можно изменить размер аватарки и автора и гостя?
Ваш код мне очень помог, но вот "села" с размерами. Уже все перебрала, и css меняла и в HTML всякие dd, dt и span, ну нИкак не выходит изменить размер аватаров Если поможете, то размер автарок хочу не меньше 60-70px. Что картинки потеряют качество, я понимаю. Самое главное, КАК это сделать, где что прописать нужно???
Спасибо.
NMitra
Ваш блог, пожалуйста.
Marina
Да, конечно, http://marinadan.blogspot.com
Марина.
Спасибо.
NMitra
Я вижу, что размер аватаров у вас изменён. Но вы несколько раз повторили один и тот же код стилей с .avatar-image-container, что не есть хорошо.
Marina
Спасибо Наташа! Но когда пробую убирать одну из позиций, то аватарка превращается совсем в маленькую 16х16. Часть убрала, но проблема осталась.
Может напишите где исправить, и что в шаблоне отвечает за размер аватарки?
Спасибо.
NMitra
Есть контейнер, для которого заданы размеры, плюс картинка, которой мы искусственно увеличиваем высоту и ширину, из-за чего увеличивается скорость загрузки страницы, что не есть хорошо. Я бы заменила

.avatar-image-container {
margin: .2em 0 0;
}

на

#comments-block.avatar-comment-indent {
margin-left: 65px;
}
#comments-block .avatar-image-container {
margin: .2em 0 0;
left: -65px;
border: 1px solid $(image.border.color);
}
.avatar-image-container, #comments-block .avatar-image-container img {
min-height: 60px;
min-width: 60px;
}
NMitra
#comments-block.avatar-comment-indent - двигает весь текстовый блок,
#comments-block .avatar-image-container - контейнеру уже задано абсолютное позиционирование, поэтому поправим только значение смещения влево,
последней строкой определим размер.
❀ Оля ❀
Скажите пожалуйста, когда то раньше удалила с вашей помощью аватарки комментирующих, теперь хочу вернуть - что делать? не могу найти..
NMitra
Нужно вернуться в старый интерфейс через шестерёнку (Blogger пока даёт такую возможность), "Настройки"-"Комментарии"-"Показывать в комментариях изображения из профиля?"-"Да"
Marina
Наташа! Все сдвинулось вправо. Вернула обратно.
Спасибо! С тем, что вы мне написали, я поняла давно, думала, что не там ошибка.
Мне нужно было увеличить размер картинки автарки. А ошибка нашлась. Я загрузила картинку не 60х60пикс, а 30х30, вот у меня картинка и не растягивалась. Хотя ...наверно, если контейнер аватарки 60х60, то картинка должна растянуться (пусть даже не в лучшем качестве)??? Как вы думаете???
Еще раз спасибо.
NMitra
Картинка должна растянуться, пусть даже не в лучшем качестве. Вы, наверно, поменяли больше, чем только аватарки. Я ориентировалась на стандартный шаблон.
Marina
Наташ! :))) Намудрила, но разобралась.
Конечно, инфу искала по всему инету, но каждый предлагает свое конкретное и пришлось все делать методом "тыка", но зато какОй опыт:).
И вам спасибо за ответы.
NMitra
А по другому изучить код и не получиться. Я тоже решаю проблемы по мере их поступления, заодно более глубоко разбираясь в теме.
Павел Ким
Здравствуйте! Такой вопрос возник: У читателя есть акк в Граватаре, а как сделать так, чтобы при комментировании, у меня отображалась его фотка? Ну я читал, что нужно вписывать почту, что при реге. Но в стандартном поле от Блоггера нет такового. Только Имя/УРЛ, а это не то. Могли бы вы помочь? Спасибо заранее)
NMitra
Пусть попробует комментировать через аккаунт WordPress
RWJ
Я накосячил с комментариями и они у меня не работают, можете дать код, комментариев?
RWJ
Не правильно работают*
NMitra
Вроде работают. Но они требуют вашего подтверждения в "Комментарии"-"Ожидается модерация", проверьте свои настройки http://shpargalkablog.ru/2010/10/comments-blogger.html#moi
Анонимный
Не работает ответить на комментарий :(
RWJ
Я нашел в простом шаблоне, просто не знаю откуда до куда нужно заменять
NMitra
Откройте новый тестовый блог и там подсмотрите. Проверьте наличие и совпадение кода из http://shpargalkablog.ru/2010/10/comments-blogger.html#otvet

Но проще восстановить "шаблоны виджетов по умолчанию". Хотя часть ваших настроек будет сбита.
NMitra
http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html#shablon
Николай
Вроде где-то у вас видел, но сейчас нигде не нашел, даже в интернете. Подскажите как изменить цвет имени админа в комментах? И как убрать ссылки с имен всех комментаторов, которые оставили свой коммент под гугловским аккаунтом? И как убрать ссылки на дату отправки комментариев. Вот 3 вопроса, которые очень меня волнуют. Надеюсь на вашу помощь :) У вас тут тоже убраны ссылки с вашего имени в комментах. (ссылка, ведущая на ваш профиль). Вот мне также надо. Дата отправки комментов у вас вообще убрана, а мне она нужна, но не нужны ссылки с них.
NMitra
Нужно убирать древовидные комментарии, а часть настроек (ссылка из аватара) вообще нельзя удалить в новом интерфейсе
Дмитрий
Здравствуйте! А нельзя ли к комментариям блоггера прикрутить функцию повышения рейтинга определенного коммента? Чтоб на каждом комменте были цифры +1 и -1. Ни у кого на блогспоте не видел такого, только на обычных сайтах.
NMitra
Не думаю, что это возможно.
illyuziya
Здравствуйте!
Скажите, а можно как-то поменять стиль кнопки "ПУБЛИКАЦИЯ", сменить цвет к примеру?
Этот синий прямоугольник, не красиво смотрится.
NMitra
Здравствуйте, внешний вид комментариев Г+. Содержимое IFRAME разве что php поменять можно.
illyuziya
Ясно, спасибо!
Sedef balıcı
thanks