[SmarticleParticipant]

Hi there, I have added the Disqus plugin to my wordpress site but have noticed it appears to be displaying incorrectly. Does anyone know of a solution to the problem?

Here are the details as well as an image.

http://secretsunday.wpengine.com/marks-testimonial-3/

WordPress 4.1 running X (3.2.1) – Child Theme: Integrity Light theme (1.0.0)
X – Disqus Comments (1.0.0)

EDIT: Trying to get link to work

[NicoModerator]

Hi there,

We’d love to help you with your problem however, 3rd party plugin and custom development is beyond the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see Our Trusted Cuztomization Partners .

Thank you for understanding.

[SmarticleParticipant]

Hey,

Just to clarify… When adding X’s official Disqus Extension to the Integrity Light Stack, will it never show up properly (on the Light Stack, specifically) unless we apply third party customisation? Or am I missing something?

The problem is that the wording, information and links, which appear alongside the discussion comment box are all white or pale grey. Obviously Integrity Light is… well… light (lol), so you can’t see any of the details.

Is there not a simple workaround, either to make the background behind Disqus dark or to make the Disqus info and links dark instead?

Cheers.

[NicoModerator]

Hi There,

Our deepest apologies about the confusion.

Our disqus integragted plugin does not yet manage color scheme color. You can try this as a temporary fix.

Add this in your Customizer’s Custom CSS:

.x-comments-area iframe {
background: #CDCDCD;
padding: 15px;
}

or this

div#layout li a > span, .community-name strong, p, div#no-posts, body.dark #footer ul li a  {
    color:rgba(0,0,0,0.5);
}

div#layout li a > span:hover, .community-name strong:hover, body.dark #footer ul li a:hover {
    color:rgba(0,0,0,1);
}

body.dark .nav>ul>li>a, body.dark .nav>ul>li>div>a {
    color:rgba(0,0,0,0.5)!important;
}

body.dark .nav>ul>li>a:hover, body.dark .nav>ul>li>div>a:hover {
    color:rgba(0,0,0,1)!important;
}

#footer {
border-color: rgba(0,0,0,0.3)!important;
}

Hope it helps!

Thanks!

[morganbyeParticipant]

Hi guys,

I’m having the same problem.

With the icon and integrity stack, if I am using a light theme I get something that looks like this:

I’ve tried both the X-disqus-comments plugin and the official Disqus plugin, they both have identical results (which from the Disqus forums) are different from the Disqus default, meaning that the properties are being inherited from X CSS.

https://help.disqus.com/customer/portal/questions/6156825-customize-css

The solution above

.x-comments-area iframe {
background: #CDCDCD;
padding: 15px;
}

does work, but is pig-ugly when I’m trying to achieve a minimalist theme, especially when the iframe is not the full screen width.

The second solution is much closer to what I want to achieve, but sadly does not work.

[Prasant RaiModerator]

Hello Morgan,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[morganbyeParticipant]

Hi guys,

The screen shot is from:
http://morganbye.com/why-trust-is-vital-to-science/

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

Request you to kindly add following CSS under Custom > CSS in the Customizer:

body.dark .nav>ul>li.active>a, body.dark .nav>ul>li.active>a:hover {
    color: #989393!important;
}

body.dark .nav>ul>li>a:hover, body.dark .nav>ul>li>div>a:hover {
    color: #B0B0B0 !important;
}

body.dark .nav>ul>li>a, body.dark .nav>ul>li>div>a {
    color: #B4B2B2 !important;
}

.post-content .post-message {
    color: #A2A1A1 !important;
}

body.dark #footer ul li a:hover {
    color: #B0AFAF !important;
}

body.dark #footer ul li a {
    color: #AFAEAE !important;
}

body.dark .post-content footer a {
    color: #B0B0B0 !important;
}

body.dark .post-content:hover footer .voting .vote-down {
    color: #B0B0B0 !important;
}

Hope that helps.

Thanks.

[morganbyeParticipant]

No luck I’m afraid guys.

I’ve stuck that code into the Customizer, saved it, tried it. No luck.

I’ve then tried to make a child theme, went to (wp-admin >) Appearance > Editor > X – Child Theme: Stylesheet (style.css) and added the code.

Inspired by other forum posts, I then tried to look at the stylesheets and FTPed to wp-content/themes/x/framework/css/site/stacks and looked at the theme CSS. But I can’t find any mention of body.dark in there.

I feel like I’m missing something obvious

[RadModerator]

Hi there,

No matter what I try, your disqus plugin wont load.

The error comes from embed code directly from disqus hosted files. But, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks!

[morganbyeParticipant]

Hello again,

Funny… At around the time you were looking at it, I posted a new blog post and received comments on it. I have also checked the other plugins, and even with a vanilla site I’ve been unable to replicate the Disqus not loading. So I can only assume that something funny was happening at Disqus’ end at the time.

From the same page, that I linked above:

And then from the new post at:
http://morganbye.com/the-world-is-going-to-university/

If you highlight the box, the text is clearly there, it’s just been formatted by the CSS to be white.

As this is stack independent, I don’t know if this coming from the stack CSS or a central CSS file or why the !important flag in the Customizer or Editor doesn’t apply to it.

[ThaiModerator]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-comments-area {
  margin: 35px 0 0;
  background-color: #A09A9A;
  padding: 10px;
}

Let us know how it goes!

[morganbyeParticipant]

Much better!

But presumably, this is just changing the colour of the background behind the Disqus comments, whilst the comments themselves stay transparent.

On pages with comments, Disqus is clearly still styled with the orange highlights, but the white text is the problem.

[Paul RModerator]

Hi,

I am sorry but we cannot change the white text because we are using an iframe to display disqus comments and the text is being controlled or styled in disqus site.

We could only change the background of the comments section to make the text visible.

Thanks

[morganbyeParticipant]

Yeah, I was starting to suspect as much.

Is it possible then to make the colour behind the comments section, full page width?

ie. Rather than have the comments look like they are in a box within .x-comments-area can I use a different call to colour everything below the main article so that it looks like a footer section. Something like a full width content band on the Integrity demo #1?

Seems a bit silly otherwise, I can’t be the only person in the world wanting a white background?

[Author]

Posts