1. matmullen

    How I Customized Disqus in a Flash

    Posted on January 16, 2012 by matmullen

    NOTE: The techniques mentioned in this blog post are outdated and don’t apply to the current version of Disqus.

    Today’s guest post was written by Sacha Greif. Sacha is a designer and coder living in Paris as well as the founder of Folyo. He recently put together a fantastic tutorial on how he designed CodeYear.com and here we present another great one on how he customized Disqus.  


    I need to confess something: I hate blog comments.

    Oh, I don’t mean reading them, that part’s pretty fun. And moderation tends to be pretty easy, thanks to anti-spam tools like Akismet. No, the part I don’t like is coding them.

    You have to style the comment text, the commenter’s name, their avatar, the date and time, take care of indented replies, and design the comment box. And don’t forget to find a spot for all those social network log in buttons, too!

    Call me lazy if you want, but that’s why I decided to use Disqus when I recently redesigned my blog. It takes care of a lot of those things for you, and the default Houdini theme does a good job of blending in with almost any design .

    Still, I couldn’t resist tweaking a couple aspects of the theme: 

     

    Disqus Custom Theme Tutorial 

    Early adopter features

    The first thing I did was turn on the Early Adopter Features (Settings > General). I’m not sure what it does exactly, but it sounded cool. After all, who doesn’t want to be an early adopter?

     image

    However, turning this on will change the markup outputted by Disqus slightly, so you might want to check your settings if you noticed differences between your markup and mine.

    Cleaning up

    One of Disqus’ big strengths is that it doesn’t just let you create individual comment threads, it also helps you build a community on your site. This is why Disqus has things like Notifications, a Community Box, and Settings for those various features.

    However, for my blog I didn’t need to have access to those features right there on the comment thread, so I decided to hide them.

    It’s as easy as:

    #dsq-global-toolbar{
                display:none;
    }

    Styling the commenter name

    Although the Houdini theme does it bests to disappear (see what I did there?), it’s got a least one distinctive feature, the grey bar that sits behind the commenter’s name. By the way, did you know it’s not just plain grey, but actually transparent grey? That’s how it can blend so well with any color scheme.

    image
    Anyway, to remove it and make the commenter’s name stand out a little more, here’s the code I’m using:

    .dsq-comment-header{
                background:none;
                padding:0;
                border:none;
                line-height:1.2;

    font-size:24px;

    }

    Rounding the avatars

    Rather than keep the default rounder-corner square avatars, I decided to use rounded avatars to keep in with the theme of my site. Here’s the code I used:
    image
    .dsq-comment .dsq-avatar img{
                border-radius: 30px;

    height:60px;

    width:60px;

    }

    If you set the border-radius at 50% or more than the height and width, you’ll end up with a square so round, it’s actually a circle!

    Happy accident

    After styling the avatars, I noticed the indented reply form had a little display bug: the avatar was now partially hidden by the text field.Disqus Custom Theme Tutorial

     
    But coincidentally, I’m using the same effect in my blog’s header:

     

    So I decided to keep it this way after all, even though it wasn’t what I intended in the first place.

    Let’s hack!

    Sorry if I conjured up images of teenagers cracking into the CIA mainframe. What I mean by “hack” is just using an undocumented Javascript function to make our implementation even more personalized.

    ElectricToolbox has a great write-up on how to run code only after Disqus has finished loading.

    Here’s what my code looks like:

    function disqus_config() {

      this.callbacks.afterRender = [function() {

    $(‘#disqus_thread li[style=”margin-left:46px;”]’).addClass(“dsq-comment-child”);

                            $(‘.dsq-trackback-url’).next().addClass(“dsq-trackbacks”);

    }];

    }


    I’m using jQuery to do two simple things:

    1. Add the unexplicably missing “dsq-comment-child” to child comments. I’m not sure why it’s not part of the default Disqus markup, but in any case the only way I found of targeting child comments was by their hard-coded (booo!) margin-left attribute.
    2. Add a “dsq-trackbacks” class to the trackback div that comes just after the “dsq-trackback-url” one. Once again, in Disqus’ original markup this div is left mysteriously classless.

    Once those classes are there, it will be much easier to target those elements in your CSS to style them properly. Of course you can use that same callback function to add any class you want, or do much more with your comments!

    The Final Product:
     image

    Conclusion

    Of course, I can’t cover all the tweaks I did. Most are pretty boring spacing and font adjustments, but they’re important to make sure everything looks just right.

    After all, your commenters are people who take time out of their busy schedule of reading Reddit to come explain to you why you’re wrong about whatever topic you were writing about (I’m kidding! I love my commenters), so you want to make sure they have a good experience. And a good design goes a long way towards that.

     

    For more info about customizing the look and feel of Disqus, check out our CSS Styling and Theme Editor docs. We’ve seen other great Disqus custom themes out in the wild as well such as those on Learnvest, Telegraph, Engadget and People. If you have one on your site too, let us know below so we can admire and take inspiration!

  2. We welcome relevant, respectful comments. Please read our Community Guidelines.

    blog comments powered by Disqus