CODEWITHSUNDEEP
csswordpresslessdisqus
Lancelot
Lancelot

Reputation: 573

Customize Disqus

I've just integrated Disqus in a Wordpress theme that I'm developing. Everything works fine except the CSS. How can I apply my own css style to Disqus ?

In my .less file, I wrote this :

#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;
                            }

                        }

                    }

                }

            }

        }
    }
}

But it doesn't work at all. I searched on the Internet and I found that my css style will not be applied because Disqus is in a iFrame. And I can find antyhing to customize Disqus in the admin panel. So, how can I solve this ?

I work on localhost. Could it be a problem?

Many thanks!

Upvotes: 5

Views: 14390

Answers (4)

galdin
galdin

Reputation: 14034

Since disqus inherits the colors from its parent element, the simplest way is to add a wrapper and style it:

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

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

Upvotes: 1

user128511
user128511

Reputation:

Repeating what @Assaf wrote but the current instructions for disqus styling are here.

They make it clear you can't style everything, only a few select things. For example for links you can set the color but not much else. I tried this on my own blog and it worked

#disqus_thread a {
  color: red;
}

But I also tried this

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

According to those docs, things you can set.

  • Choose the light or dark theme

    It's set on the admin page under Admin > Setup > Appearance

  • Set the color of paragraphs and links

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

  • Set the width of the comments

    #disqus_thread {
  width: 700px;
}

  • Add your logo if you pay for the Pro version

Upvotes: 2

Carol McKay
Carol McKay

Reputation: 2424

Reference: 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 --*/

Upvotes: 1

hassan
hassan

Reputation: 145

A simple tricks for changing Disqus background . If you are using a "disqus-comment-system" plugin , then open comments.php file . and search for disqus_thread id. Now add your own class. for example : <div id="disqus_thread" class="myclass">

And finally add this class on your css file . and change whatever you want. like : padding, background ,,etc This same technique works in other discuss plugin as well.

Thanks

Upvotes: -2

Related Questions