Disqus Custom CSS Styling in 3 Easy Steps

So I have been running Disqus on this blog for over a year now, and I am a huge fan of the service. [Ed note: I got a little fired up here, so feel free to jump right to the steps.] My prior experience with comments had me deleting at least a few comments daily, all being spam. Akismet has improved much since then, but with Disqus I now have only had to remove 1-2 spam comments this past year. That is fantastic results. I also recently checked a friends dormant blog and there were 112K spam comments missed by Akismet needing approval, yes, that’s thousands!

So this is a very cool tech company based in NYC with money from Fred Wilson’s Union Square Ventures (which is how I first heard of Disqus). But what I just don’t get is how they don’t give more support for changing the look and feel of the content they put on my blog.

I understand completely that they can’t actually help individuals with how to code their pages, but the best info they have is on this Disqus wiki page on Custom CSS? I would love to hear any non-html-developer try and make use of that page. It was either written by developers who have long forgotten what it is like to deal with non-developers, or the lawyers got involved (And I don’t consider myself enough of an expert on the topic to start editing their wiki page). By support, all that is needed is a good sample and walk-thru webpage.

Now Disque is a completely user-friendly service that requires only a bit of copy and paste of a line of code, it is perfectly targeted at the non-technical (blogging) audience, yet they really dropped the ball at the last possible moment. Their code and styling look great on untextured white background, and nothing else, and pretty much disappear on a black background based site like mine.

So I mentioned I have been using Disqus for a year, so how did I solve this problem? I didn’t. For the last year I have had black text comments on a black background. You see, when I set this up, I went to try and change the styling from the Disqus admin, where of course it is never even mentioned. From a Google search, all I got was the above page telling me to create something from scratch using whatever elements listed on the page I wanted to use, which frankly is so unhelpful and a waste of my time. So since I have have a very low commented site, I didn’t bother.

But now I actually know enough CSS to be dangerous, so I thought I would finally tackle the issue. As a bonus I assumed with a year passed there should be some better examples floating around, but I was wrong. So now I am providing what I did to solve this simple issue, that I have seen many many people still have.

So here is my own sample for anyone trying to create custom background and text colors for Disqus in three easy steps:

Step 1: Start with a Disqus CSS sample, here is mine: disqus-form.css and save it so that you can edit it.

Step 2: Edit it. HTML and CSS can look scary, but you only actually have to start with one small section to change the background and font text color for the entire Disqus section (which is all I’ve been trying to do). Then upload the file to your blog.

/* Everything Disqus on your page is contained within this. */
#disqus_thread {
background-color: #000000;
color: #ffffff;
border-style: solid;
border-color: #cccccc;
padding: 5px;
}

Now this looks intimidating, but all you need to know about colors is that “ffffff” is white and “000000″ is black (”cccccc” is gray). So my background color is black and my (font) color is white. If you want to get more tricky then those, look up your html color. Border-color is a gray line around the Disqus area, and the Padding gives a little space around the outside (5 pixels worth).

Step 3: You will need to add the following bit of code to your Wordpress/blog header template file, inside the “head” tag. Change “yourblog.com” to your blog address and where you uploaded the file. Save the template header when done.

<script type="text/javascript">var disqus_iframe_css = "http://www.yourblog.com/disqus-form.css";</script>
<link type="text/css" rel="stylesheet" href="http://www.yourblog.com/disqus-form.css" media="screen" />


Guess what, you are done. Hope this helps.

I think it is ALWAYS better to provide a template that has good simple notations for people to make changes, so I grabbed the initial CSS file from this forum post. Most of the advice was to add only the first line to your template header and make half the changes to the CSS in your blog’s template CSS, and I find that too confusing, so I combined them into the same file.

I know I didn’t explain how to find your template files or what all the CSS options are, or even what CSS stands for (Cascading Style Sheets), but that’s what Google is for once you get the basics done. Good luck.

[Ed: added a link to the initial CSS file]

Bugs, Worms and Death Stars »« Twitter, Flickr backup with LifestreamBackup