In 2022, Disqus introduced a new style update called “New Disqus”. This has made a lot of people very angry and been widely regarded as a bad move. Hearing our complaints, they made a rollback to “Classic Disqus” an easy option within your user settings.
Until now, that is. As of May 2025 “Classic Disqus” has been deep sixed for good, leaving those of us who prefer the clean, compact, non-squircley design language that had been in place for nearly a decade out in the cold.
I’m sure many will adjust to the bloated, cluttered, mobile-optimized design. Some may even like it better. We don’t know; frankly, we don’t want to know. But if you want to return to the glory days of 2013, there is a way.
Here’s a demonstration of the contrast. On the left: New Disqus. On the right: My homebrew. Note how many more comments are visible in the same vertical space, and how much less cluttered with heavy icons the UI is.
How do you achieve this fabulous transformation on your own computer? There are three easy steps.
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 many specific modifications to Disqus to achieve the result you see in the screenshot. I present them here as an a la carte menu for you to choose from as you please.
For any modification you want to use, simply copy and paste the code text into your new Disqus style document, click Save, and they will automatically appear whenever you load a new page containing a Disqus comments section.
Aesthetic Fixes
Make the featured comment appear ABOVE the New Comment box, rather than below it. The #1 most idiotic design decision in the entire New Disqus redesign can be undone with these two lines of code:
/* Returns featured comment to being ABOVE the new post box*/
#posts {display: flex; flex-direction: column;}
#highlighted-post {order: -1}Clean up the look of each post header. They’re so busy in the new version!
/*Cleaning up the look of the post header*/
a.time-ago.icon.icon-clock::before{display: none;} /*removes clock from timestamps*/
a.time-ago::before {content: " • ";} /*restores interpunct between username and timestamp*/
span.post-meta{display: inline-block; padding-top: 1px;} /*moves timestamp up next to byline*/
span.follow-user{display: none;} /*removes follow user icon*/
header.comment__header{margin-top: 0px; margin-bottom: 1px;} /*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*/
.post-content .post-menu--refresh{visibility: hidden !important;} /*Hiding - and ... on every comment except on mouseover*/
.author.publisher-anchor-color { font-size: 13px; padding-bottom: 2px;} /*reduce size of author names*/
span.parent-link-container {margin-left: 1px;} /*horizontally compress reply indicators*/
a.parent-link {margin-right: 1px;}Solidifying the hollow buttons. “+X New Comments” and “Load More Comments” will now look the same all the time rather than changing on mouseover.
/* Solidifying hollow buttons */
button.alert.alert--realtime--refresh-v2 {background: rgb(10,144,81); color: white;} /*remove mouseover change for new comments*/
.btn.load-more-refresh__button {background: rgb(10,144,81); color: white;} /*remove mouseover change for load more comments*/Making Avatars Smaller. This restores the sizes and proportions of avatars to their Classic Disqus values. Makes reply avatars smaller than top level post avatars, as is only right and proper.
/*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; margin-top: 3px;} /*sets indicator height to match new avatar height on top-level posts*/
ul[data-role="children"] .indicator{height: 40px; margin-top: 3px;} /*sets indicator height to match new avatar height on replies*/
.post-content .user{border-radius: 8px;} /*reduces roundedness of avatar corners*/
.image-refresh {border-radius: 8px;} /*reduces roundness of new post avatar corners*/Compressing Useless Vertical Whitespace. There is SO MUCH whitespace in the new design. It’s everywhere. It’s not needed. Out it goes.
/*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;}
.postbox{margin-bottom: 5px;}
.nav.nav-primary.nav-primary--refresh {margin-bottom: 8px;}
footer.comment__footer {margin-top: 4px;}Lightening Up System Text. A lot of the UI text has a very heavy visual weight in New Disqus. This returns it to the airier Classic look.
/*lightening up system text*/
.post-body .comment__header .edit-time-left, .post-body .comment__header .has-edit, .post-body .comment__header .parent-link, .post-body .comment__header .state-byline, .post-body .comment__header .time-ago, .post-body .post-body-inner .edit-time-left, .post-body .post-body-inner .has-edit, .post-body .post-body-inner .parent-link, .post-body .post-body-inner .state-byline, .post-body .post-body-inner .time-ago {color: #687a86}
/*replacing font*/
body.roboto, body.roboto input, body.roboto select, body.roboto textarea {font-family: "Helvetica Neue",arial,sans-serif !important}Revising Comment Footer. This restores the footer to roughly how it looked in Classic Disqus, other than the upvote buttons which are a whole separate issue. It also gets rid of that little pencil icon when somebody else is writing.
/*fixing footer*/
.comment-footer__action li {
font-size: 13px;
line-height: 13px;
}
/*restore interpunct between votes and actions*/
li.voting::after {
content: "•";
margin-top: -2px;
}
/*tweak footer display*/
li.edit, li.reply {
margin-top: -2px;
}
/* Remove edit pencil */
@media (max-width: 767px) {
.comment__share .toggle .icon, .edit .comment-footer__action .icon {
font-size: 0px;
}
}
/*replace with edit text*/
.icon.icon-pencil-large:after {
content: "Edit";
font-size: 13px;
font-style: normal;
}
/* Remove pencil from real-time notification */
.icon-pencil:before {
display: none;
}Changes That Impact Functionality
These eliminate some UI elements that I never use, so I wanted to offset them here because they’re not purely cosmetic and do actually remove functionality that some might want to retain.
/* Remove share icon on comments*/
.icon.icon-share {display: none;}
/*Remove share button on comments*/
li.comment__share {display: none;}
/* Hide user badges */
span.user-badges-collection {display: none;}
/* Remove heart/email signup button in header*/
li.nav-secondary-refresh__list-item {display: none;}
/*Hide 'content unavailable's, i.e. people you block or who block you, AND THEIR CHILDREN*/
/*.post.minimized{display: none;}*/Big Dumb Block of Upvote Code
I also don’t like how the little thumb pictures look and put way too much effort into restoring the look of upvotes. I didn’t 100% succeed but if you want to change them back to a close approximation of how they used to look, here you go:
/*Don't show 0 upvotes*/
.count-0 span.updatable {display: none;}
/*Replace upvote icon*/
/* Target the upvote button's control span */
.vote-up .control {
/* Remove the current mask-image */
mask-image: none !important;
-webkit-mask-image: none !important;
/* Reset any background properties */
background: none !important;
/* Use ::before to insert the "^" character */
position: relative;
}
.vote-down .control {
/* Remove the current mask-image */
mask-image: none !important;
-webkit-mask-image: none !important;
/* Reset any background properties */
background: none !important;
/* Use ::before to insert the "^" character */
position: relative;
}
/* Insert the "^" character */
.vote-up .control::before {
content: "\25b3";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #656c7a; /* Use Disqus's standard gray color for inactive state */
text-size-adjust: 100%;
--publisher-color: rgb(10,144,81);
--publisher-color-safe: rgb(10,144,81);
-webkit-font-smoothing: antialiased;
list-style: none;
list-style-type: none;
line-height: 1;
font-family: inherit;
white-space: nowrap;
font-size: 16px;
font-weight: 700;
box-sizing: content-box;
}
/* Style for the active/clicked state */
.vote-up.upvoted .control::before {
color: #2e9fff; /* Disqus blue color for active state */
border: none;
}
.embed-refresh-v2.embed-refresh .post-votes .vote-up.upvoted .count {
color: #2e9fff;
}
.vote-up.upvoted:hover, .vote-down.downvoted:hover, .embed-refresh-v2.embed-refresh, .post-votes {
border: none !important;
}
/* Insert the "down arrow" character */
.vote-down .control::before {
content: "\25bd";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #656c7a; /* Use Disqus's standard gray color for inactive state */
text-size-adjust: 100%;
--publisher-color: rgb(10,144,81);
--publisher-color-safe: rgb(10,144,81);
-webkit-font-smoothing: antialiased;
list-style: none;
list-style-type: none;
line-height: 1;
font-family: inherit;
white-space: nowrap;
font-size: 16px;
font-weight: 700;
box-sizing: content-box;
}
/* Style for the active/clicked state */
.vote-down.downvoted .control::before {
color: red;
border: none;
}
/* Remove upvote borders */
.vote-up, .vote-down, .vote-up:hover, .vote-down:hover {
border-color: red !important;
border: none;
position: relative;
height: 100%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
.vote-down:hover, .vote-up:hover {
border: none;
}
.post-votes a {
padding: 0px 0px 0px 0px;
}
/* add space between upvote and downvote modules*/
a.vote-down {
margin-left: 10px;
}
/* change upvote icons into carets instead of full triangles*/
.vote-up span.control{
clip-path: inset(0px 0px 5px 0px);
transform: scaleY(0.8);
text-shadow: 0 0 1px;
}
.vote-down span.control{
clip-path: inset(3px 0px 0px 0px);
transform: scaleY(0.8);
text-shadow: 0 0 1px;
}If you just want to get the whole suite pasted in there at once, here’s all that as a single block of text with no commentary in between. Just drop it in and you’re done:
COMPLETE STYLE SHEET TEXT
/*######################################## AESTHETIC FIXES #######################################################*/
/* Returns featured comment to being ABOVE the new post box*/
#posts {display: flex; flex-direction: column;}
#highlighted-post {order: -1}
/*Cleaning up the look of the post header*/
a.time-ago.icon.icon-clock::before{display: none;} /*removes clock from timestamps*/
a.time-ago::before {content: " • ";} /*restores interpunct between username and timestamp*/
span.post-meta{display: inline-block; padding-top: 1px;} /*moves timestamp up next to byline*/
span.follow-user{display: none;} /*removes follow user icon*/
header.comment__header{margin-top: 0px; margin-bottom: 1px;} /*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*/
.post-content .post-menu--refresh{visibility: hidden !important;} /*Hiding - and ... on every comment except on mouseover*/
.author.publisher-anchor-color { font-size: 13px; padding-bottom: 2px;} /*reduce size of author names*/
span.parent-link-container {margin-left: 1px;} /*horizontally compress reply indicators*/
a.parent-link {margin-right: 1px;}
/* Solidifying hollow buttons */
button.alert.alert--realtime--refresh-v2 {background: rgb(10,144,81); color: white;} /*remove mouseover change for new comments*/
.btn.load-more-refresh__button {background: rgb(10,144,81); color: white;} /*remove mouseover change for load more comments*/
/*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; margin-top: 3px;} /*sets indicator height to match new avatar height on top-level posts*/
ul[data-role="children"] .indicator{height: 40px; margin-top: 3px;} /*sets indicator height to match new avatar height on replies*/
.post-content .user{border-radius: 8px;} /*reduces roundedness of avatar corners*/
.image-refresh {border-radius: 8px;} /*reduces roundness of new post 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;}
.postbox{margin-bottom: 5px;}
.nav.nav-primary.nav-primary--refresh {margin-bottom: 8px;}
footer.comment__footer {margin-top: 4px;}
/*lightening up system text*/
.post-body .comment__header .edit-time-left, .post-body .comment__header .has-edit, .post-body .comment__header .parent-link, .post-body .comment__header .state-byline, .post-body .comment__header .time-ago, .post-body .post-body-inner .edit-time-left, .post-body .post-body-inner .has-edit, .post-body .post-body-inner .parent-link, .post-body .post-body-inner .state-byline, .post-body .post-body-inner .time-ago {color: #687a86}
/*replacing font*/
body.roboto, body.roboto input, body.roboto select, body.roboto textarea {font-family: "Helvetica Neue",arial,sans-serif !important}
/*fixing footer*/
.comment-footer__action li {
font-size: 13px;
line-height: 13px;
}
/*restore interpunct between votes and actions*/
li.voting::after {
content: "•";
margin-top: -2px;
}
/*tweak footer display*/
li.edit, li.reply {
margin-top: -2px;
}
/* Remove edit pencil */
@media (max-width: 767px) {
.comment__share .toggle .icon, .edit .comment-footer__action .icon {
font-size: 0px;
}
}
/*replace with edit text*/
.icon.icon-pencil-large:after {
content: "Edit";
font-size: 13px;
font-style: normal;
}
/* Remove pencil from real-time notification */
.icon-pencil:before {
display: none;
}
/*#################### CHANGES THAT IMPACT FUNCTIONALITY ###############################*/
/* Remove share icon on comments*/
.icon.icon-share {display: none;}
/*Remove share button on comments*/
li.comment__share {
display: none;
}
/* Hide user badges */
span.user-badges-collection {display: none;}
/* Remove heart/email signup button */
li.nav-secondary-refresh__list-item {display: none;}
/*BIG MESSY AESTHETIC CHANGE FOR UPVOTES, DELETE IF NOT DESIRED*/
/*Don't show 0 upvotes*/
.count-0 span.updatable {display: none;}
/*Replace upvote icon*/
/* Target the upvote button's control span */
.vote-up .control {
/* Remove the current mask-image */
mask-image: none !important;
-webkit-mask-image: none !important;
/* Reset any background properties */
background: none !important;
/* Use ::before to insert the "^" character */
position: relative;
}
.vote-down .control {
/* Remove the current mask-image */
mask-image: none !important;
-webkit-mask-image: none !important;
/* Reset any background properties */
background: none !important;
/* Use ::before to insert the "^" character */
position: relative;
}
/* Insert the "^" character */
.vote-up .control::before {
content: "\25b3";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #656c7a; /* Use Disqus's standard gray color for inactive state */
text-size-adjust: 100%;
--publisher-color: rgb(10,144,81);
--publisher-color-safe: rgb(10,144,81);
-webkit-font-smoothing: antialiased;
list-style: none;
list-style-type: none;
line-height: 1;
font-family: inherit;
white-space: nowrap;
font-size: 16px;
font-weight: 700;
box-sizing: content-box;
}
/* Style for the active/clicked state */
.vote-up.upvoted .control::before {
color: #2e9fff; /* Disqus blue color for active state */
border: none;
}
.embed-refresh-v2.embed-refresh .post-votes .vote-up.upvoted .count {
color: #2e9fff;
}
.vote-up.upvoted:hover, .vote-down.downvoted:hover, .embed-refresh-v2.embed-refresh, .post-votes {
border: none !important;
}
/* Insert the "down arrow" character */
.vote-down .control::before {
content: "\25bd";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #656c7a; /* Use Disqus's standard gray color for inactive state */
text-size-adjust: 100%;
--publisher-color: rgb(10,144,81);
--publisher-color-safe: rgb(10,144,81);
-webkit-font-smoothing: antialiased;
list-style: none;
list-style-type: none;
line-height: 1;
font-family: inherit;
white-space: nowrap;
font-size: 16px;
font-weight: 700;
box-sizing: content-box;
}
/* Style for the active/clicked state */
.vote-down.downvoted .control::before {
color: red;
border: none;
}
/* Remove upvote borders */
.vote-up, .vote-down, .vote-up:hover, .vote-down:hover {
border-color: red !important;
border: none;
position: relative;
height: 100%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
.vote-down:hover, .vote-up:hover {
border: none;
}
.post-votes a {
padding: 0px 0px 0px 0px;
}
/* add space between upvote and downvote modules*/
a.vote-down {
margin-left: 10px;
}
/* change upvote icons into carets instead of full triangles*/
.vote-up span.control{
clip-path: inset(0px 0px 5px 0px);
transform: scaleY(0.8);
text-shadow: 0 0 1px;
}
.vote-down span.control{
clip-path: inset(3px 0px 0px 0px);
transform: scaleY(0.8);
text-shadow: 0 0 1px;
}That’s all I’ve got for now – I don’t think there’s anything else that’s bugging me enough to pursue a fix for it, but you never know. I hope this helps some other persnickety holdouts like me maintain their sanity. Happy commenting!
You must be logged in to post a comment.