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

参考：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 2

重复@Assaf写的内容，the current instructions for disqus styling are here。

他们明确表示你不能为所有东西设计样式，只有少数选择。例如，对于链接，您可以设置颜色，但不能设置其他颜色。我在我自己的博客上试过这个并且它有效

#disqus_thread a {
  color: red;
}

但我也试过这个

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

根据这些文档，你可以设置的东西。

选择浅色或深色主题

在Admin＆gt;下的管理页面上设置设置＆gt;外观

设置段落和链接的颜色

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

设置评论的宽度
```
#disqus_thread {
  width: 700px;
}
```
如果您支付专业版

Answer 3

由于disqus继承了其父元素的颜色，最简单的方法是添加一个包装器并设置它的样式：

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

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

Answer 4

改变 Disqus 背景的简单技巧。如果您使用的是“disqus-comment-system”插件，请打开comments.php文件。并搜索 disqus_thread ID。现在添加自己的类。例如： <div id="disqus_thread" class="myclass">

最后在你的css文件中添加这个类。并改变你想要的任何东西。喜欢：填充，背景等同样的技术也适用于其他讨论插件。

由于

自定义Disqus

4 个答案: