Пятница , 20 Октябрь 2017
Главная / Свой сайт / Настройка дизайна CSS Disqus комментариев на сайте

Настройка дизайна 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. спасибо. помогло. только не мешало бы добавить, что предложенные примеры нужно вставлять в родной css темы. я-то по-началу в самом плагине css искала.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

три × пять =