Bring back the Classic Old Reddit Feel and Remove Modern Bloat (RES Compatible, Toggles, + Userscript)
Classic Reddit: Rewrite by slippinggitty
Details
Authorslippinggitty
LicenseWTFPL
Categoryreddit.com old.reddit.com
Created
Updated
Code size23 kB
Code checksumb9323185
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Also available in the "Classic Reddit++" userscript.
If you want to use this userstyle and have the CR++ features individually, you can install the features here. The script gives more Classic Reddit-authenticity: Such as a recreation of Trending Subreddits, classic Favicon, Home -> "FRONT", estimated post tallies, a back-ported view count for every post, and even the classic "reddit: front page of the internet" slogan in the front page window title.
Announcement Post on /r/Userstyles
Version 2.1
- User Bar Clean Up: "Chat" and "Notifications bell" can be hidden via new toggles.
- Go here to change your notification settings.
- Expandos on RES use the classic Reddit spirtes, if enabled
Restored since last update
- The "Chat" bubble & Notification bell icons can be hidden via a toggle. Reddit is removing Direct Messages for users, and I've reconsidered the "all or nothing" approach.
Version 2.0
- Toggles: Each change is now it's own toggle.
- Classic Reddit Thumbnails: Restores the old post icons.
- Full Post Scores: Displays the complete score (e.g., 10.5k → 10,500).
- Multireddit Sidebar Removal: Hides the Multireddit sidebar.
- Hide Arrows on Archived Posts: Automatically hides vote arrows on archived posts.
- RES Night Mode: RES Night Mode now has it's old color scheme.
Removed since last update
- The "Chat" bubble icon is no longer hidden. Reddit is removing Direct Messages for users, and I'd rather someone see a message then miss message.
--- Boring Back Story ---
I'm the original author of this Userstyle. I made it when I was 15, and was obsessed with reddit & "reddit culture" like a moron. I had found & collected a bunch of other people's CSS snippets, added what I liked, improved where needed, and it resulted the "Classic reddit" userstyle. (I even spelt reddit in all lowercase intentionally because of the logo... I have autism LMAO.)
I saw that someone had re-posted the original style from the userstyles-org archive, and was reminded of it's existance. You can find that userstyle here if you'd prefer to use the "classic"-Classic reddit style.
Seeing this interest, I've decided to revive the style, rewrite it a little bit, and, well-- improve where needed.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Classic Reddit: Rewrite
@namespace github.com/openstyles/stylus
@version 2.1.2
@description A style to make Old reddit look more like pre-2017 with configurable features.
@author SlippingGitty
@license WTFPL
@preprocessor stylus
@var checkbox hideMultibar "Hide subreddit multibar" 1
@var checkbox hideBell "Hide Notification Bell" 1
@var checkbox hideChat "Hide Reddit Chat" 1
@var checkbox addUserPrefix "Add /u/ before usernames" 1
@var checkbox hideArchivedArrows "Hide arrows on archived posts" 1
@var checkbox oldCommentFont "Use old comment font sizes" 1
@var checkbox fullUserScores "Show full user scores" 1
@var checkbox oldRedditIcons "Use old Reddit icons" 1
@var checkbox expandoButtons "Use old expando buttons" 1
@var checkbox classicRESNight "Use Classic RES Night Mode" 1
==/UserStyle== */
@-moz-document domain("reddit.com") {
/* ===== HIDE REDDIT CHAT ===== */
if hideChat {
#chat-v2, span.separator:nth-child(8), span.separator:nth-child(9) {
display: none;
}
}
/* ===== HIDE NOTIFICATIONS BELL ===== */
if hideBell {
#notifications, span.separator:nth-child(6), span.separator:nth-child(7) {
display: none;
}
}
/* ===== HIDE SUBREDDIT MULTIBAR ===== */
if hideMultibar {
.listing-chooser {
display: none;
}
.content[role=main] {
margin-left: 5px!important;
}
}
/* ===== ADD /U/ BEFORE USERNAMES ===== */
if addUserPrefix {
a.author:before {
content: "/u/";
text-transform: none!important;
}
}
/* ===== HIDE ARROWS ON ARCHIVED POSTS ===== */
if hideArchivedArrows {
.archived-infobar ~ #siteTable .arrow,
.archived-infobar ~ .commentarea .arrow {
visibility: hidden;
}
}
/* ===== OLD COMMENT FONT SIZES ===== */
if oldCommentFont {
.md {
font-size: inherit;
line-height: normal;
}
.md p {
line-height: normal;
}
.md pre > code {
font-size: small;
}
.md h1 {
font-size: 1.2em;
line-height: normal;
}
}
/* ===== SHOW FULL USER SCORES ===== */
if fullUserScores {
.link .score {
font-size: 0;
}
.link .score::before {
content: attr(title);
font-size: 12px;
}
.link .score::first-letter {
font-size: 12px;
}
}
/* ===== OLD REDDIT ICONS ===== */
if oldRedditIcons {
.thumbnail.self {
height: 50px;
background-image: url(https://www.redditstatic.com/sprite-reddit.ZDiVRxCXXWg.png);
background-position: 0px -491px;
background-repeat: no-repeat;
}
.thumbnail.default {
background-image: url(https://www.redditstatic.com/sprite-reddit.ZDiVRxCXXWg.png);
background-position: 0px -434px;
background-repeat: no-repeat;
height: 50px;
}
.thumbnail.image {
background-image: url(https://www.redditstatic.com/sprite-reddit.ZDiVRxCXXWg.png);
background-position: 0px -434px;
background-repeat: no-repeat;
height: 50px;
}
.thumbnail.nsfw {
background-image: url(https://www.redditstatic.com/sprite-reddit.ZDiVRxCXXWg.png);
background-position: 0px -361px;
background-repeat: no-repeat;
height: 69px;
}
.thumbnail.spoiler {
background-image: url(https://imgoat.com/uploads/679091c5a8/5031.png);
background-position: 0px -361px;
background-repeat: no-repeat;
height: 69px;
}
/* Old gold icon */
.gilded-gid2-icon:before {
width: 13px;
height: 13px;
background-position: -42px -1676px !important;
}
}
/* ===== OLD EXPANDO BUTTONS ===== */
if expandoButtons {
.expando-button.selftext.collapsed:hover,
.eb-sch {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: -61px -547px;
background-repeat: no-repeat;
}
.expando-button.selftext.collapsed {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: -90px -547px;
background-repeat: no-repeat;
}
.expando-button.video.collapsed {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: -87px -584px;
background-repeat: no-repeat;
}
.expando-button.video.collapsed:hover,
.eb-vch {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: -58px -584px;
background-repeat: no-repeat;
}
.expando-button.selftext.expanded,
.eb-se {
margin-bottom: 5px;
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: -29px -584px;
background-repeat: no-repeat;
}
.expando-button.selftext.expanded:hover,
.eb-seh {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: 0px -584px;
background-repeat: no-repeat;
}
.expando-button.video.expanded,
.eb-ve {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: -29px -613px;
background-repeat: no-repeat;
}
.expando-button.video.expanded:hover,
.eb-veh {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png);
background-position: 0px -613px;
background-repeat: no-repeat;
}
.expando-button.image,
.expando-button.video-muted,
.expando-button.expando-button-loading,
.expando-button.expando-button-requires-permission {
vertical-align: top !important;
width: 23px;
height: 23px;
max-width: 23px;
max-height: 23px;
display: inline-block;
background-image: url(https://imgur.com/m2osmrU.png);
margin-right: 6px;
padding: 0;
}
/* Old Reddit Expandos */
.comment .tagline {
display: inline-block !important;
}
.comment .expand {
float: right !important;
margin: -2px 0 0 2px !important;
}
}
/* ===== MAKE EXPANDO SPRITES WORK WITH RES ===== */
if expandoButtons {
/* Target RES-specific expando buttons */
.res-nightmode .expando-button,
.res-nightmode .expando-button:hover,
.res .expando-button,
.res .expando-button:hover {
background-image: url(http://www.redditstatic.com/sprite-reddit.jzJhk9_9j8Q.png) !important;
/* Reset any RES-specific styling that might interfere */
filter: none !important;
-webkit-filter: none !important;
transform: none !important;
background-color: transparent !important;
}
.res .expando-button.selftext.expanded,
.res-nightmode .expando-button.selftext.expanded {
background-position: -29px -584px !important;
background-repeat: no-repeat !important;
margin-bottom: 5px !important;
}
.res .expando-button.selftext.expanded:hover,
.res-nightmode .expando-button.selftext.expanded:hover {
background-position: 0px -584px !important;
background-repeat: no-repeat !important;
}
.res .expando-button.video.collapsed,
.res-nightmode .expando-button.video.collapsed {
background-position: -87px -584px !important;
background-repeat: no-repeat !important;
}
.res .expando-button.video.collapsed:hover,
.res-nightmode .expando-button.video.collapsed:hover {
background-position: -58px -584px !important;
background-repeat: no-repeat !important;
}
.res .expando-button.video.expanded,
.res-nightmode .expando-button.video.expanded {
background-position: -29px -613px !important;
background-repeat: no-repeat !important;
}
.res .expando-button.video.expanded:hover,
.res-nightmode .expando-button.video.expanded:hover {
background-position: 0px -613px !important;
background-repeat: no-repeat !important;
}
/* Handle image expandos for RES */
.res .expando-button.image,
.res .expando-button.video-muted,
.res-nightmode .expando-button.image,
.res-nightmode .expando-button.video-muted {
vertical-align: top !important;
width: 23px !important;
height: 23px !important;
max-width: 23px !important;
max-height: 23px !important;
display: inline-block !important;
background-image: url(https://imgur.com/m2osmrU.png) !important;
margin-right: 6px !important;
padding: 0 !important;
}
/* Override RES's own expando modifications */
.res .RESUsersDBIcon,
.res-nightmode .RESUsersDBIcon {
display: inline-block !important;
margin-left: 3px !important;
}
}
/* ===== OTHER FEATURES (ALWAYS ENABLED) ===== */
/* Rename "Best" to "What's Best" */
#header .tabmenu li:first-child a:before {
content: "What's ";
}
/* Spoiler tag */
a[href$="/spoiler"] {
background: #0...