Настройка дизайна CSS Disqus комментариев на сайте

Сторонние системы комментирования на сайтах завоевывают всё больше и больше своих фанатов. Это и не странно — они снижают нагрузку на Ваш сервер и упрощают пользователям сам процесс оставления отзывов на сайте.

Настройка дизайна CSS Disqus комментариев на сайте

Рассмотрим подробно, как можно настроить отображение комментариев Disqus (дискас) на Вашем сайте с помощью CSS. По умолчанию за стили отвечает disqus_thread, которые мы и будем настраивать.

Ширина и отступы поля комментирования

Комментарии Disqus, по умолчанию, сами подстраиваются под ширину Вашего сайта, но, зачастую, из-за 100% ширины, отступов не хватает, и форма ввода становится впритык. Эта проблема легко решается установкой отступов вокруг iframe с комментариями:

/* отступ справа и слева disqus 20 пикселей */

#disqus_thread {
margin-right:20px;
margin-left:20px;
}

Смена цвета блока комментариев и ссылок внутри

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

/* установка цвета формы */

#disqus_thread {
color: #ffffff;
}

/* цвет ссылок */

#disqus_thread a {
	color: blue;
}

Вместо #FFFFFF можно установить любой цвет. Аналогично с цветом всего блока, можно установить и цвет ссылок внутри контейнера iframe.

Что нельзя редактировать

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

Понравилась статья? Поделиться с друзьями:
Комментарии: 4
  1. Голуба

    Здравствуйте, у меня сайт на 3х языках, может кто знает как настроить Disqus что бы язык менялся автоматически?

  2. Admin

    fcxzcv

  3. Дарья Мороз

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

    1. Rich

      Спасибо, Дарья!

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: