Красивое оформление комментариев в блоге

CommentsВ этой статье я хотел бы рассказать о том, как оптимизировать пространство в ленте комментариев и сделать ее несколько красивее.

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

Для начала, как и в прошлой статье, я предлагаю вам ознакомиться с тем, о чем именно идет речь. Смотрим на картинку:

Красивое оформление для комментариев

Как вы видите, в переработанной версии все служебные элементы скомпонованы наверху, образуя "шапку", а пространство, выделенное под "тело" комментария раздалось вширь за счет того, что теперь под аватар не резервируется вертикальный столбец примерно в 40 пикселей. Ну, и красивая рамочка вокруг каждого комментария, разумеется. Убедил, что так лучше? Тогда начинаем священнодействие :-)

Открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета" и под строкой "/* Comments" и вставляем следующий код:
/* Comments
----------------------------------------------- */
.avatar-image-container {
  background: url("https://lh4.googleusercontent.com/-89_0zLbxxSI/TmCsszik0xI/AAAAAAAAAPA/YGjARPZ5nNk/anonymous-avatar.gif") no-repeat;
  float: right !important;
  margin: 5px 10px 5px 5px !important;
  position: static !important;
  border: none !important;
}

#comments-block.avatar-comment-indent {
  margin-left: 0 !important;
}

#comments-block .avatar-image-container.avatar-stock img {
  padding: 23px 25px 0 0;
  width: 12px;
  height: 12px;
}

.comment-header {
  border: 1px solid #c3def4;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  margin: 5px 0;
  padding: 5px 0 5px 10px;
  position: relative;
}

.comments {
  line-height: 130%;
}
Строки, которые, возможно, вам стоит адаптировать под себя, это 4 (картинка аватара-заглушки), 22 (цвет рамки) и 23-25 (радиус скругления углов рамки). Остальное лучше не трогать.

Теперь, когда пол дела сделано, ищем следующий код:
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <dt expr:class='"comment-author " + 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>
    </b:loop>
  </dl>
</div>
...и заменяем его этим:
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <div class='comment-header'><dt expr:class='"comment-author " + 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-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>
      <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></div>
    </b:loop>
  </dl>
</div>
Вот, собственно, и все. Хочу только уточнить, что скругление уголков рамочки, которое вы видите на картинке, в IE будет только в последней, девятой версии, да и то, после проведения небольшой доработки. В младших версиях этого браузера этого не будет вовсе. Подобного можно добиться, но я специально не стал этого делать. При большом количестве комментариев, страница в IE8- из-за этого будет сильно тормозить. Не думаю, что ради чуть большей красивости стоит жертвовать скоростью загрузки страницы.

Комментариев: 86

  1. Тимофей, я сделала у себя в блоге и все работает. А вот как сделать так, чтобы перед формой комментариев разместить текст, как это сделано у Вас?

    ОтветитьУдалить
    Ответы
    1. Ну, это стандартная опция настроек блога: Настройки -> Комментарии -> Сообщение формы создания комментариев.

      Завтра-послезавтра будет еще одна "вкусняшка" в продолжение темы комментариев. Так что разминайте пальчики для забивки в шаблон нового код ;-)

      Удалить
  2. Тимофей! Еще просьба-вопрос)))
    Всю "петрушку" с исправлениями (анонимный на гость...) затеяла ради нового оформления комментариев. Вот по вашей статье выше, все делаю как написано, но к сожалению ничего не изменяется. Строки "/* Comments" у меня нет, вставила перед ]]. И строчек первого кода, который нужно заменить тоже нет.
    Если можете, подскажите как быть. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Боюсь тут я Вам не смогу помочь. Издержки использования Вами самопального шаблона, увы :-(

      Попробуйте найти код максимально похожий на то, что у меня в статье. А дальше уже Вам с этим кодом придется экспериментировать самостоятельно...

      Удалить
    2. Спасибо Тимофей за то, что "Боюсь тут я Вам не смогу помочь.".
      Если б не ваш отказ, то я так и продолжала бы себя терзать с этой программой Аристер. А на самом деле Blogger ий ))) шаблон и проще и удобнее, ну по крайней мере мне так пока нравится. Настраиваю дизайн как мне хочется, и поэтому наверно будут вопросы))). Так что, очень надеюсь на помощь)))

      Удалить
    3. Спрашивайте. Помогу в меру сил и возможностей. Меня, кстати, на написание нескольких статей сподвигли читатели :-)

      Удалить
    4. Анонимный14 июля 2012 г., 13:04

      "При большом количестве комментариев, страница в IE8- из-за этого будет сильно тормозить." А что есть те кто пользуется этим дерьмом?

      Удалить
    5. У IE достаточно много приверженцев. При этом многие из них до сих пор по тем или иным причинам сидят под ХР. А там либо встроенный IE6, либо апгрейт до IE8 (IE9 не поддерживает XP)...

      В будущем, пожалуйста, в комментариях моего блога обходитесь без грубости и крепких словечек. Этот ресурс, в том числе, посещают и дамы!

      Удалить
  3. Спасибо большое! Наверно нужно вернуться на блоггеровский вариант.

    ОтветитьУдалить
  4. Тимофей! Изменила шаблон на стандартный. И ))) все получилось. Спасибо большое!

    ОтветитьУдалить
  5. Ага, отлично, это ж сколько теперь времени нужно будет, чтоб сделать дизайн как мне хочется! Ну что ж, будем осваивать и это ))).
    Тимофей! Как мне стать вашим постоянным читателем??? Гаджета такого не вижу.
    Подскажите)))

    ОтветитьУдалить
  6. Тимофей, очень хочу такие рамочки для АСБО. Все сделала,как вы сказали, но осталось по-прежнему... :-(

    ОтветитьУдалить
  7. О! Появились такие рамки! Я решила заглянуть в настройки- дополнительно- разрешить фид блога и сделала "ни одного" и рамочки появились!

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

      Удалить
    2. Отлично, буду ждать... Мне нужно как у вас - рамочка и кнопки "ответить" и "удалить"

      Удалить
  8. А скажите, пожалуйста, можно сделать фон ответов другим цветом?

    ОтветитьУдалить
    Ответы
    1. Алия, это оформление создавалось для линейного формата комментариев. Соответственно, для скрипта комментариев все сообщения равнозначны - он не понимает, что из них вопросы, а что ответы.

      Хотя, чисто теоретически, можно "назначить" ответами все сообщения, отправленные от Вашего имени и привязать к Вашему нику смену цвета сообщения.

      Удалить
    2. Нет,там бывают ответы не только от моего имени...

      Удалить
  9. Тимофей, мне кажется, что у меня линейный формат. И рамочки у меня появились, только кнопки "Ответить" и "удалить" пропали... Можно как-нибудь сделать, чтобы они не исчезали?

    ОтветитьУдалить
    Ответы
    1. Нет, нельзя. Вернее можно, но для этого надо специально писать код.

      Да и зачем они? Ответить все равно в форме внизу комментариев только получится. А для удаления в линейном формате есть кнопочка изображающая мусорку.

      Лучше активируйте тогда персональный ответ и цитирование, как вы это раньше делали, используя материалы другой моей статьи.

      Удалить
    2. Нет, персональный ответ для этого блога мне не подходит. Хотелось бы, чтобы как у вас - и рамка и ответить и удалить. Если у вас есть, значит такое возможно же сделать и себе?

      Удалить
    3. У меня иерархический формат комментариев. Вы же, насколько я понял, прикипели к линейному. В же линейном подобное невозможно.

      Удалить
    4. Вы писали: Заходим в Настройки -> Другое -> напротив Разрешить фид блога в выпадающем меню выбираем Дополнительно -> напротив Каналы комментариев к каждому сообщению в выпадающем меню выбираем: для отображения комментариев в линейном формате - Ни одного, в иерархическом - Полный.
      ************
      У меня стоит "Полный". Значит у меня все же иерархический формат... Но рамки не появляются. Появляются только тогда, когда выбираю "Ни одного". Ничего понять не могу...:wall:

      Удалить
    5. Ой, извините, это же вы написали для линейного формата. Буду ждать теперь для иерархического...

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

    [img]http://s019.radikal.ru/i644/1204/fc/2c2c59258da0.jpg[/img]

    ОтветитьУдалить
    Ответы
    1. Для класса comment-thread или класса inline-thread задайте цвет фона. Точнее сказать не могу - нет времени на эксперименты. Так что самостоятельно выясните, для какого класса лучше.

      Но это все будет работать только для комментариев в иерархическом формате.

      Удалить
  11. Фуф, выяснила... Даже цвет фона ответов изменила... Если интересно, могу рассказать как...
    [img]http://s54.radikal.ru/i143/1204/a3/4c85ce2fa9de.jpg[/img]

    ОтветитьУдалить
    Ответы
    1. Да нет, не нужно. Если мне приспичит, то я разберусь :-)

      Удалить
  12. А! Забыла сказать... Еще они (комментарии)у меня пронумеровались почему-то...

    ОтветитьУдалить
    Ответы
    1. А это Вы где-то перемудрили. В коде изначально предусмотрена нумерация комментариев. Только она скрыта. Вы эту нумерацию высветили...

      Удалить
  13. Подскажите, пожалуйста, этот код работает для иерархического формата публикации или линейного ? Спасибо

    ОтветитьУдалить
  14. Здравствуйте! Подскажите, как изменить кнопки "ответить" "удалить" в комментариях?

    ОтветитьУдалить
    Ответы
    1. О каких кнопках идет речь? Вы имеете в виду одноименные ссылки в комментариях с иерархической структурой?

      Удалить
  15. Доброй ночи Тимофей!
    Опять с вопросом :)
    Подскажите пожалуйста, как можно изменить размер аватарки и автора и гостя?
    Ваш код мне очень помог, но вот "села" с размерами. Уже все перебрала, и css меняла и в HTML всякие dd, dt и span, ну нИкак не выходит изменить размер аватаров Если поможете, то размер автарок хочу не меньше 60-70px.
    Спасибо.

    ОтветитьУдалить
    Ответы
    1. День добрый, Марина!

      А зачем оно Вам? Вы отдаете себе отчет, что этим просто растянете маленькую картинку до большего размера? Картинку-то для аватара скрипт Blogger выдает именно 36х36px. И растянув ее, Вы потеряете в качестве изображения.

      Удалить
  16. Здравствуйте Тимофей! Рада вашему ответу. И все-таки. Помогите сделать. Я понимаю, что изображение растянется, но САМ ФАКТ, что я смогу это сделать:). Буду экспериментировать.
    Пожалуйста расскажите :)

    ОтветитьУдалить
    Ответы
    1. Марин, подобное можно сделать только для линейного формата комментариев. Для иерархического, как сейчас у меня, это, по сути, невозможно.

      а и, если честно, мне не хочется копать в этом направлении - бесперспективная тема... :-\

      Удалить
  17. Тимофей! Вы "лентяй" :-D :-D ;-D Кто-то обещал помочь, чем сможет :) Если все-таки согласитесь, то у меня линейные комменты.
    За ответ спасибо :)

    ОтветитьУдалить
    Ответы
    1. Марин, напомните через месяц-полтора. Сейчас времени даже нет что-то смотреть. Вы же видите, даже статей новых уже давно нет...

      Удалить
  18. Хорошо! Я упрямая, пока не получится, не успокоюсь :) :) ;)
    Напишу Вам в июне:)
    Спасибо.

    ОтветитьУдалить
  19. Тимофей ! Подскажите, пожалуйста, что нужно добавить в мой код, чтобы в профиле можно было выбирать Анонимный ? Говорят, не возможно оставить комментарий
    Может я намудрил с кодом вашего поста ?

    Вот мой блог:
    http://land-travel.net/

    Спасибо за совет

    ОтветитьУдалить
    Ответы
    1. А при чем здесь мой код? Возможность анонимного комментирования выбирается в стандартных настройках блога.

      Заходите в Настройки->Комментарии и там ищите нужную опцию.

      Удалить
    2. Да,Тимофей,спасибо.
      Не могу разобраться, почему текст в рамку не попадает. Как это можно исправить?

      Удалить
    3. У Вас комментарии закрыты для свободной публикации - только через предмодерацию. И как я должен тестировать, что у Вас там не работает, не имея возможности посмотреть на оставленный мной тестовый комментарий? :wall:

      Удалить
    4. После исправления кода аватары должны переместиться вправо, а они у меня слева от комментария

      Удалить
    5. Да бог с ними с аватарами. У Вас текст комментариев отсутствует! Это Вы в упор не замечаете?? А между тем при правильном использовании моего кода это попросту невозможно. В предложенном мной коде тэги только добавляются, но ничего не удаляется. А у Вас на выходе просто нет блока, ответственного за вывод тела комментария!

      За смещение аватара вправо отвечает пятая строка первого блока кода. Тем не менее, по неизвестной мне причине, у Вас она не отрабатывается.

      P.S. Вы упорно не снимаете предмодерацию с комментариев, несмотря на мои просьбы. Видимо, Вы не очень-о жаждете моей помощи, раз столь целеустремленно препятствуете моей работе.

      Удалить
  20. Об отсутствии текста сообщал раньше.
    Предмодерация снята. Подскажите об ошибках в моем коде
    Тимофей, буду Вам очень признателен

    ОтветитьУдалить
  21. Тимофей !
    В вашем посте написано все предельно ясно.
    При редактировании кода на Ваш не возникло никаких сложностей.
    Все получилось, так как Вы предлагали.
    Повторно проверил все свои действия, всё так
    Посоветуйте мне как быть

    ОтветитьУдалить
    Ответы
    1. Вижу в Вашем CSS-коде тэги служебных комментариев. Возможно, проблема в них.
      В CSS свой способ выделения служебных надписей: не как <!-- ... -->, а как /* ... */.

      Удалить
  22. Тимофей, посмотрите в CSS поменял служебные надписи и аватары стали на положенное место.
    Остался текст комментария

    ОтветитьУдалить
    Ответы
    1. Вы внимательно смотрели ЧТО на ЧТО Вы заменяете согласно рекомендациям этой статьи? Замещаемый код ТОЧНО был таким же как прописан у меня? Разработчики Blogger очень часто вносят свои правки в исходный код и материалы моих статей становятся неактуальными. Например, они могли видоизменить формат кода вывода комментариев, а Вы подмахнули этот код на мой не проверив соответствие.

      В любом случае, чтобы тут помочь, мне нужно видеть уже не код страницы, а исходный код блога. И у меня, если честно, сейчас на подобное нет времени. Так что советую Вам восстановить замененный код в исходное состояние (не то, что у меня, а то что РЕАЛЬНО было), а потом попробовать дополнить его по аналогии с моим примером. В частности рамка делается за счет дополнения некоторых тэгов в строки 4 и 35. Ну а дата и кнопка удаления перемещаются наверх при помощи банальной перетасовки последовательности тэгов.

      Если поймете, в чем у Вас была проблема - отпишитесь.

      Удалить
    2. отписываюсь ...

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

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

      Посмотрите, появился текст !
      Подскажите как подправить мой код для рамок со скруглениями.
      Надеюсь, проблему можно решить

      Удалить
    3. То, что Вы проделали, это не решение - это суррогат! Вы сломали механизм вывода комментариев. Но вместо того, чтобы его починить, просто поменяли его на другой, альтернативный механизм.

      Если Вам так легче - пожалуйста. Только вот рамка для иерархической структуры делается гораздо сложнее. И материал, как ее сделать я придерживаю для одной из следующих статей. Так что либо поступайте, как я Вам рекомендовал в свои прошлом посте, либо ждите статью про оформление комментариев с иерархической структурой. Когда она выйдет - не знаю.

      Удалить
  23. Огромное спасибо, все получилось. Все прекрасно работает даже в нестандартном шаблоне. Я счастлива ))))

    ОтветитьУдалить
  24. Добрый вечер!Тимофей,скажите,пожалуйста,почему у меня не отображаются кнопки ответить и удалить(мусорка)?

    ОтветитьУдалить
    Ответы
    1. Полагаю, потому, что Вы используете линейный формат комментариев, а не иерархический. Именно под линейный формат и была написана данная статья.

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

      Удалить
  25. С кнопкой ответить разобралась..при иерархическом формате она есть....а вот с кнопкой удалить у меня недавно появилась проблема..и при иерархическом формате ее не было...исчезла и не появилась..вообще ничего не могу отредактировать быстро...что то я натворила:~(

    ОтветитьУдалить
    Ответы
    1. Ну тут уж я ничем не могу помочь. Угадать, где Вы напортачили, я не в состоянии.

      А, вообще, перед кардинальными правками шаблона не помешало бы делать его резервную копию...

      Удалить
  26. Спасибо вам огромное!я вам там в личку письмо скинула:-[

    ОтветитьУдалить
  27. Вечер добрый! :-D Вопросик возник. Чуть ниже формы отправки комментария есть две ссылки-Выйти и Подписаться по электронной почте. Как можно изменить в этих ссылках цвет шрифта, размер шрифта или вообще как-то заменить на картинку???
    Через просмотр кода выдает <a href="javascript:BLOG_CMT_subscription.toggle()" id="subscribeButton">Подписаться по электронной почте</a> а такого кода у меня шаблон не находит
    Спасибо. Надеюсь на ответ.

    ОтветитьУдалить
    Ответы
    1. В шаблоне этого кода и не будет. Модуль формы отправки комментариев подключается с помощью IFRAME. Он закрыт для правки. По крайней мере изменить текст ссылок или заменить на картинку Вам не удастся.

      А вот с изменением шрифта и цвета можно попробовать поиграться. Попробуйте задать стили оформления для ID signoutLink, ID subscribeButton и ID subscribeButtonHolder. Может получиться, а может и нет. Тут раз на раз не приходится...

      Удалить
  28. Спасибо! Всё получилось. Только вот почему то мой аватар администратора отображается как знак вопроса с мальньким значком блоггера внизу. Не знаете почему?

    ОтветитьУдалить
    Ответы
    1. У меня с этим на Вашем блоге проблем нет. Видимо Вы потерли аватар на сервисе Picasa в альбоме "Изображения Blogger" или "Фотографии профиля".

      Удалить
  29. Сейчас всё работает. Спасибо.

    ОтветитьУдалить
  30. Здравствуйте! Помогите разобраться, на всех страницах блога есть форма отправки сообщения. Ее нет только на Главной после любого поста, такое ощущение, что она просто не до загружается, как быть?
    Спасибо. форма есть -http://vera-ostraya.blogspot.com/p/blog-page.html форма отсутствует - http://vera-ostraya.blogspot.com/2013/03/blog-post_12.html

    ОтветитьУдалить
    Ответы
    1. У Вас вместо формы крутится картинка: [img]http://cackle.me/static/img/comment-wait.gif[/img]
      Посмотрите на ссылку, задающую эту картинку. Поищите ее упоминание в коде Вашего шаблона или скриптах, что Вы подключили со стороны. Скорее всего то, к чему принадлежит эта картинка и создает проблему для вывода формы.

      Удалить
  31. Тимофей, подскажите пожалуйста, что я сделала не так. После /* Comments" и нижней черты вставила: .avatar-image-container { и все остальное.
    У меня получилось:http://deslin-des.blogspot.ru/2013/03/blog-post_15.html; т.е. в закругленном прямоугольники оказался только ник и фото, остальное не влезло. Потом вы пишете, что: нужно заменить, но в HTML я у себя нашла только это: после плюса стоит:
    + "_comments-block-wrapper"'>

    ОтветитьУдалить
    Ответы
    1. У Вас иерархическая структура комментариев. Статья же писалась под линейную структуру.

      Удалить
  32. Ясно, хоть это я подтвердила. А по моему у Вас тоже иерархическая, как Вы так сделали. Научите :)

    ОтветитьУдалить
    Ответы
    1. Это должно стать материалом одной из будущих статей. Увы, времени на их написание катастрофически не хватает...

      Удалить
  33. Тимофей, здравствуйте!
    Огромное спасибо за Ваш блог.
    Вроде, не чайник и все сделал, как описано. Но изменения минимальны. Изменился вид: теперь вверху - "такой-то комментирует...", дата, время и корзина, а потом комментарий. Аватарки так и остались справа (http://www.hromoff.com/2012/08/blog-post_9.html?showComment=1366407676822). Рамочка не появилась ни разу - ни при линейной структуре комментариев, ни, тем более, при иерархической.
    Где может прятаться решение проблемы?

    ОтветитьУдалить
  34. Тимофей, прошу прощения за беспокойство. Разобрался. Сбился в мелочах.

    ОтветитьУдалить
    Ответы
    1. Всегда рад, если человек сам находит решение. И не потому, что мне работы меньше. А потому, что когда сделаешь что-то сам, всегда остается чувство удовлетворения и гордости собой, что редко случается, когда тебя вели за ручку! :friends:

      Удалить
  35. Подскажите, пожалуйста, вот мне эти закругления не критичны. Мне бы просто поле, на котором комментирование размещено, сделать другим цветов, а то оно светлое, а общая гамма блога темная

    http://electronica-synth.blogspot.ru/2014/02/iPolisyx.html

    ОтветитьУдалить
    Ответы
    1. Вы имеете в виду поле ввода комментариев? Увы, его цвет изменить не получится. Это отдельная страница, представленная в виде iframe-модуля. Передача CSS-стилей между двумя страницами, размещенными в разных доменах (страница с формой размещена в домене blogger.com, а не в blogspot.com) невозможна.

      У меня тоже есть блог в темных тонах. Точно так же приходится мириться с этим безобразием...

      Удалить
  36. Прошу прощения. Нашел где меняется цвет этого поля:

    #comments {
    background-color: #000030;
    padding: 15px;
    }

    ОтветитьУдалить
    Ответы
    1. Как видел у Вас подложку под поле ввода комментариев белой, так и сейчас ее наблюдаю... Что изменилось?

      Удалить
  37. Поменяла код. но в рамочк взялось не все :(

    ОтветитьУдалить
  38. Подскажите, пожалуйста, а как сделать такой стиль для иерархических комментариев? Если данный код применить при иерархических, то в рамку берется только имя комментатора, а сам комментарий остается за пределами рамки.

    ОтветитьУдалить
    Ответы
    1. Боюсь, я так и не нашел пока времени для написания статьи на тему применения подобного оформления к иерархической структуре комментариев. Каюсь...

      Удалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях