How To Improve DISQUS Comments Paging With Custom CSS In Less Than A Minute?

By on February 16, 2012 in Usability

Improve the DISQUS comments paging design in just 4

quick steps

Do you have a DISQUS comments system installed for your blog or website? If yes, then I am sure you will love this small and quick design tip. I will help you to improve the p

aging design which comes at the bottom of the comments list. The default paging is good but not that enough to be called as “Usability Good”. It has small numbered links which makes it very hard to click on them.

See the screenshot below, the small numbered is the default links design and the boxed big numbers design is what we are going to create.
Disqus Comments Paging Design

Follow these quick 4 steps to do this magic:

  1. Log in to your DISQUS account and click on settings tab.
  2. Click on “Appearance”
  3. Paste the following CSS code in the section called “Custom CSS” 
    /* Current (Selected) Page Style */
.dsq-numbered-pagination span{
margin:0 4px;
padding:3px 5px;
font-size:1.2em;
font-weight:bold;
border:1px solid #ddd;
background:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

/* Pagination Links: 1, 2, 3..etc */
.dsq-numbered-pagination a{
margin:0 4px;
padding:3px 5px;
font-size:1.2em;
border:1px solid #c8d5e0;
background:#f6f6f6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
  4. Click “Save Changes” and you’re done!

See the screenshot below to visually understand the above steps more easily:
Disqus comments paging design steps

This is what a final comments paging design will look. I have the same paging design set for this blog, you can check the same in the comments section below.
Final disqus comments paging design

Related posts:

About Sach

Sachin is a web application developer, technology blogger and web addict! He has over 6 years of web development experience and he writes tutorials primarily focused on LAMP, Ajax, Api's, jQuery etc. He is usability expert and he always likes to share his knowledge with people.
View all posts by Sach →

, , ,

  • Sachin Kumar Rajput

    Testing paging design :)

  • Updatec

    good.. but is this not slowing your site..?

    • Sachin Kumar Rajput

      No, it won’t. Disqus is fully AJAX / DOM based which loads right after a page gets loaded properly. So it dosen’t affect the site’s performance.

    • Sachin Kumar Rajput

      Please view on other article paging which has more comments: Please see a demo at the page end:
      http://blog.sachinkraj.com/software-requirement-specification-srs-template/

  • bitemelater

    How can I reduce the font size of “Showing N Comments” and “Add New Comment” ?

    • Sachin Kumar Rajput

      Add this:

      #dsq-sort-by h3{font-size:14px;}
      #dsq-account-dropdown h3{font-size:14px;}

  • Top Crowdsourcing Sites

    That’s literally great! gonna to check on my blog! I hope this disqus techniques works!

    • Sachin Kumar Rajput

      Thanks. Yes, it will work. The new admin panel of disqus is slightly changed, but u will find it else let me know. I will help you.

  • Joel Don

    Do you know how to change the font and font size of the Add New Comment text entry area for typing a new comment?  The default from Disqus is a small Palatino font, but I see your site is displaying this as an Arial/Helvetica 12pt.  Is there a code snippet that can be added to the Custom CSS option in Appearance?

    • Sachin Kumar Rajput

      Please add this style:

      #dsq-reply h3{font-family: Helvetica, Arial, Sans-serif; font-size: 2em;}

      Let me know if the above works?

      • Joel Don

        Nope, that didn’t work.  
        #dsq-reply h3 controls the style for “Add New Comment” label only.  I have Firebugged this section and have tried at least a dozen variations of ID selectors with no luck.  You had to have coded this in your Custom CSS, since Disqus doesn’t offer anything but Palatino.  Or are you a premium Disqus user with access to the additional formatting?  On inspection, the new comment entry area is #comment or textarea or dsq-textarea + dsq-textarea-reply.  None of those selectors work, however, at least not in the way I have applied them.  Any ideas?

      • Joel Don

        Sachin.  It appears that the Add New Comment data entry box is a special case.  Because it is bound by a construct called “iframe”. According to Disqus, it is not directly customizable by CSS coding (though some have tried). I’m sure someone will figure out a hack to break through the iframe barrier

  • Fiji Deals

    This really works! 4 magic steps! Brilliant tutorial! Thanks!

    • Sachin Kumar Rajput

      Thanks :)

  • sohbet

    thank you kameralı sohbet this site perfect

  • Guest

    mm

  • MHazell

    Nice tip. Adding it.

    You should see the CSS I have on my embed. It looks great. Go check it out if you wish.