Изменить дизайн комментариев в блоге.

изменить дизайн комментариев
Доброго времени суток, друзья. По просьбе своих читателей пишу шпаргалку, как изменить дизайн комментариев в блоге. Зададим им чуть чуть другой стиль и оформим голубым фоном. Посмотрите как они будут выглядеть на этой странице.
Даже если вы начинающий блогер, особого труда внести некоторые дополнения в шаблон блога не составит. Чтобы было легче найти нужный участок, куда будем устанавливать дополнительный CSS код, прочитайте это сообщение.

Итак, идём во вкладку шаблон-изменить HTML. Обязательно делайте резервную копию шаблона. А вдруг что-то пойдёт не так. Находим строку ]]></b:skin> и сразу над ней устанавливаем следующий код.

.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"АВТОР";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:20px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:;position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}

Отмеченное слово АВТОР можно заменить своим ником или именем.
После установки нажмите на кнопку просмотр и если нет предупреждений, смело жмём сохранить. Бежим и смотрим, что получилось.

Так с помощью небольшого кода CSS изменили немного внешний вид комментариев.
Спасибо за ваш визит. Удачи всем и до новых встреч.

И всех моих дорогих читательниц с наступающим Праздником 8 марта. Всем любви, счастья, терпения и мира. Спасибо, что вы у меня есть. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Добрый вечер! Ну и где пример посмотреть, как это все выглядит?! (посмотрите какую ссылку вы поставили). Виктория, поздравляю Вас с наступающим 8 марта.

    ОтветитьУдалить
  2. Вика привет. У тебя ссылка примера дана админки блоггер. Меня перекинуло к себе в панель. Хотелось бы посмотреть результат.

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

      Удалить
  3. Виктория! Какая Вы умница! Красиво смотрятся комментарии! Но можно без этого обойтись! Я лишний раз боюсь менять шаблон блогов.

    ОтветитьУдалить
  4. А резервная копия шаблона где сохраняется? Если что-то не получится, как ей воспользоваться? СПАСИБО!

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

      Удалить
  5. Уже сделала, спасибо за шпоргалку. Только когда я установила код над ]]>, то он не заработал, а когда разместила в секции /* Comments, то получилось.
    Немного уменьшила аватары, у больших плохое качество.
    Спасибо за поздравления! Тебе тоже всего наилучшего. Цветов, радости и желания творить!
    Это тебе спасибо, что ты у нас есть!

    ОтветитьУдалить
    Ответы
    1. Спасибо,Олеся. Как приятно слышать такие тёплые слова. Кстати, ты умница. Можно и так как ты сделала.

      Удалить
    2. Вика, привет, заметила, что аватар - анонимный (помнишь мы как-то в одной из шпаргалок вставляли такой код - .comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { content: url( http://s019.radikal.ru/i644/1504/53/5135d81ee1af.png); }) не работает. Когда анонимный или имя-URL, то просто пустое окошечко. Может эту строчку надо вставить куда-то в определенное место?

      Удалить
    3. Олеся.С этими комментариями вообще полный п...дец. Я у тебя это в блоге давно заметила. отпишусь на неделе.

      Удалить
    4. Я заметила, что когда нажимаешь опубликовать комментарий, то слетают все картинки, в гаджетах, вместо них "черные квадраты Малевича" и появляются только при переходе на главную страницу. Это не только у меня? Проверь, пожалуйста, у тебя тоже так происходит.
      Спасибо за помощь!

      Удалить
    5. Олеся, да у тебя чёрные квадраты. Но они и на главной не отображаются. Проверила у себя- всё нормально.
      Смотри-во-первых ты в коде поставила лишнюю скобку в конце. Вот так он должен выглядеть .comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { content: url( http://s019.radikal.ru/i644/1504/53/5135d81ee1af.png); } Кстати, я вообще у тебя в коде такой не вижу.
      Статья про это здесь. http://www.shpargalochki.ru/2015/04/ikonka-anonimnog-kommentatora.html
      И ещё мне кажется, что ты с комментами у себя столько всего налепила в шаблоне, и смайлы, и коды для картинок, и стили и аваторы анонима. У тебя вообще сам гаджет последние комментарии не отображался и кнопка форма связи. Сейчас посмотрела всё ОК. Такое бывает с ними. Понаблюдай.

      Удалить
    6. Да уже не до аватаров, сейчас ответила на коммент, опять черные квадраты. Может глянешь мой /* Comments
      ----------------------------------------------- */
      Может там что-то лишнее? Можно прислать?

      Удалить
    7. Хотя, знаешь,пропадают ведь не все картинки, а только те, которые с появляющимся описанием и конвертик формы связи. Наверное, какой-то конфликт в шаблоне получается?

      Удалить
    8. Попробуй убрать это стиль новых своих комментарие. Хотя это всего лишь CSS и не должен так влиять. Сейчас ещё гляну шаблон.

      Удалить
    9. Скорее всего глюк пошёл от того, что ты код этот поставила в стилях комментариев а не перед ]]> и ошибку в этом коде у теб я нашла. Пишу в личку.

      Удалить
    10. Удалила стили, ничего не изменилось, так же слетают картинки при публикации. Установила стиль назад. Буду вспоминать, что делала до этого, может где какую скобку лишнюю или добавила или удалила.

      Удалить
    11. Олеся, я вижу ты много всего за последнее время понаставляла и поменяла. Попробуй так. Скопируй по очереди код какого-нибудь баннера. Удали его. Если ситуация не меняется, копируй следующий, и так далее. пока всё не будет ОК. Потом поймёшь из за чего-ставь обратно.

      Удалить
    12. Да, спасибо, Вика, так и сделаю! Хорошего дня!

      Удалить
  6. Наконец, исправила косяк в комментах, уже стало напрягать, что после того, как отправил коммент, сайт зависал.
    Пришла мысль, взять кусок кода, отвечающий за комменты, из тестового блога, у которого такой же шаблон. Оказалось, что куска какого-то не хватало. Интересно, почему?)))
    Теперь все отлично!

    ОтветитьУдалить
    Ответы
    1. Олеся, наконец-то разобралась. Лучше позже чем никогда. Поздравляю.

      Удалить

Пользовательский поиск