How to Make Disqus Look Mostly Like it Used To in 3 Easy Steps

Disqus recently rolled out a comprehensive style update to its commenting system, inspiring reactions ranging from befuddlement to dismay to indifference to a few “well I guess some parts of this are better, maybe”s. While the final version is not nearly as disastrous as the initial beta test this site participated in a few weeks ago, it does still have some baffling aesthetic choices that many users (including myself) find visually disharmonious, obnoxiously large, or both.

Fortunately, because this change was so surface-level, it’s almost entirely reversible on desktop machines by very simple means of CSS modification. That means I was able to take my desktop view of the comments section from the version you see on the left to the version you see on the right. Note that my modified version makes better use of screen real estate so you can observe up to three more jokes about wizard shit at a time. Note also that the size of the text of the comments themselves has not changed – I just shrank everything around them.

If you would like to achieve this for yourself (or even make further modifications), it’s as simple as 1, 2, 3:

Step 1 – Add Stylebot to Your Browser

Stylebot is a browser extension that modifies the CSS of web domains that you specify for it. It can be installed on the desktop versions of Chrome, Firefox, and Edge. The developer’s site with links for all three versions is here: stylebot.dev

Step 2 – Create a Style for Disqus.com

Once you have Stylebot installed, you will need to create a style that applies to the domain Disqus.com, NOT the-avocado.org or any other site you use with Disqus on it. This is because all Disqus commenting panels are actually iframes that function as portals back to the Disqus servers where content lives in the Disqus domain. This is good for us! It makes everything easier. This one style will modify all instances of Disqus you might access across the entire internet.

To set up the filter, simply click the Stylebot S that has appeared on your Extensions toolbar, and then click Options.

Once you’re in Stylebot’s options area, choose Styles from the menu to the left. Then select Add a new style… and enter disqus.com as the URL.

Step 3 – Paste in the Modifications

I have made 13 specific modifications to Disqus to get it how I want it. The CSS code that makes these changes is in the block below – all you have to do is paste it into the new disqus.com style you’ve just created and click Save.

I have added comments to each line explaining what specifically it does to the look, as well as organizing them into three basic categories. If you don’t like a change I’ve made (say you like the bigger avatars and want to keep them around), just don’t include those lines when you copy and paste. You can also easily modify any value I’ve set to make things bigger or smaller – it’s all in pixels so it should be fairly intuitive.

/*Cleaning up the look of the post header*/

a.time-ago.icon.icon-clock::before{display: none;} /*removes clock from timestamps*/

span.post-meta{display: inline-block; padding-top: 1px;} /*moves timestamp up next to byline*/

span.follow-user{display: none;} /*removes follow user icon*/

.post-byline{font-size: 15px;} /*reduces font size of usernames*/

header.comment__header{margin-top: 0px;} /*removes unnecessary headroom from comment headers*/

.post div.avatar{margin-top: 3px;} /*pushes top of avatar down into alignment with username instead of the tops of badges*/


/*Making avatars smaller*/

.post-content .user{height: 50px; width: 50px;} /*reduces size of top-level comment avatars to old Disqus size*/

ul[data-role="children"] .user{height: 40px; width: 40px;} /*reduces size of reply avatars to old Disqus size, differentiating them from top-level comments*/

.indicator{height: 50px;} /*sets indicator height to match new avatar height on top-level posts*/

ul[data-role="children"] .indicator{height: 40px;} /*sets indicator height to match new avatar height on replies*/

.post-content .user{border-radius: 8px;} /*reduces roundedness of avatar corners*/


/*Compressing overall verticality of page*/

div.post-content{margin-bottom: 16px;} /*reduces vertical whitespace between comments; set to taste*/

.nav-secondary-refresh{margin-bottom: 0px;} /*removes whitespace below oldest/newest/first*/


/*BIG CHANGES*/
/*Hide 'content unavailable's AND THEIR CHILDREN*/

/*.post.minimized{display: none;}*/

/*Hide featured comment entirely*/

/*#highlighted-post{display: none;}*/

The two commented-out styles at the bottom are big-swing changes that I know most people would not want on by default because they are attempting to address Disqus issues that are not fixable with CSS alone. You do lose content when activating these styles: the featured comment acting as a speed bump between the new post box and the rest of the comments gets zapped out of existence, and that means you don’t get to read it. The annoying Content Unavailable clutter from users you’ve blocked or those who’ve blocked you is gone, but so are any replies to those posts that you would normally be able to see. I know these are trade-offs that some people might want to take though, so I have included them in an inactive state. To activate them simply delete the /* */ comment tags surrounding them.

And that’s it! Happy commenting!