Настроить Disqus

Question

Я только что интегрировал Disqus в тему Wordpress, которую я разрабатываю. Все отлично работает, кроме CSS. Как я могу применить свой собственный стиль CSS к Disqus?

В моем файле.less я написал это:

#disqus_thread {
    position: relative;
    display:block;
    margin: 0 0 20px 0;
    padding: 20px;
    line-height: 1.5;
    color: @brandGray !important;
    background-color: @white;
    .flat-box-shadow;
    overflow: hidden;
    clear: both;

    iframe {

        body.dark {

            #layout {

                #main-nav {

                    nav {

                        a {
                            color: @brandViolet !important;

                            &:link,
                            &:visited {
                                color: @brandViolet !important;
                            }

                            &:hover,
                            &:active,
                            &:focus {
                                color: @lightViolet !important;
                            }

                        }

                    }

                }

            }

        }
    }
}

Но это не работает вообще. Я искал в Интернете и обнаружил, что мой стиль CSS не будет применяться, потому что Disqus находится в iFrame. И я могу найти antyhing для настройки Disqus в админ-панели. Итак, как я могу решить это?

Я работаю на localhost. Может ли это быть проблемой?

Большое спасибо!

Answer 1

Повторяю то, что написал @Assaf, но текущие инструкции по стилю disqus здесь.

Они дают понять, что вы не можете стилизовать все, только несколько избранных вещей. Например, для ссылок вы можете установить цвет, но не более того. Я попробовал это в своем блоге, и это сработало

#disqus_thread a {
  color: red;
}

Но я тоже попробовал это

#disqus_thread a {
  color: red;
  font-weight: bold;           /* no effect */
  text-decoration: underline;  /* no effect */
}

Согласно этим документам, вещи, которые вы можете установить.

• Выберите светлую или темную тему

  Это установлено на странице администратора в Admin > Настройка> Внешний вид

• Установить цвет абзацев и ссылок

  #disqus_thread p {
    color: green;
  }
  #disqus_thread a {
    color: red;
  }
  

• Установите ширину комментариев

  #disqus_thread {
    width: 700px;
  }
  

• Добавьте свой логотип, если вы платите за Pro версию

Answer 2

Поскольку disqus наследует цвета от родительского элемента, самый простой способ - добавить обертку и стилизовать ее:

<div id="disqus-wrapper">
    <div id="disqus_thread"></div>
</div>

#disqus-wrapper a:any-link {
    color: #333; /* the color you want here */
}

Answer 3

Ссылка: http://casadeblundell.com/jonathan/custom-styling-for-disqus-css/

/* --- disqus css -- */

#disqus_thread {
color: #ffffff;
border-style: 0px solid;
border-color: #cccccc;
padding: 5px;
}

#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #000000;
}

.dsq-reaction-body {
color: #fff;
}

.dsq-reaction-header cite, .dsq-reaction-header span {
color: #ccc;
}

.dsq-reaction-retweets {
color: #ccc;
}

/*--- end disqus css --*/

Answer 4

Простые трюки для изменения фона Disqus. Если вы используете плагин disqus-comment-system, откройте файл comments.php. и найдите идентификатор disqus_thread. Теперь добавьте свой собственный класс. например: <div id="disqus_thread" class="myclass">

И, наконец, добавьте этот класс в ваш CSS-файл. и меняй что хочешь. как: padding, background, и т. д. Эта же техника работает и в других плагинах обсуждения.

Спасибо