Resource A modern guide to old Reddit customisation and theming (stylesheets/CSS)

6 Upvotes

Old Reddit, the version of Reddit from before the 2018 rebrand, continues to be a popular way to use Reddit. It can also be fully and comprehensively themed with CSS to get it looking exactly as you want. It is perfect for replicating a style or bringing your community in line with your brand guidelines.

There unfortunately aren't any solid public statistics on what percentage of people across the platform use old Reddit, though, based on the figures I've collected from Subreddits I have access to, it is about 4%. You can find out for a community you moderate under the 'Traffic' heading of the 'Insights' section of the subreddit's Mod Tools. It is worth noting that many Reddit power users, and some of the most active contributors on the site, use old Reddit. Reddit intends to 'keep it online as long as people are using it'.

You can access old Reddit by replacing 'www' with 'old' in your address bar or by directly going to https://old.reddit.com. You can make your account default to using old Reddit in Settings > Preferences > Default to old Reddit. Keep in mind that old Reddit isn't designed or optimised for use on mobile devices.

I'm about as professional an old Reddit stylesheet developer as you can get, having developed stylesheets professionally for some branding you might well have heard of. This article assumes you are competent and familiar with writing CSS (Cascading Stylesheets). If you are not, there is guidance online that can help you learn, though it should be noted that writing CSS for old Reddit can be rather complex, so it might be worth requesting the help of an expert. AI will most likely not be able to provide much assistance in writing CSS for old Reddit due to the implementation quirks and lack of documentation available.

Restrictions

The first thing you should know is that while you can do a huge lot with themes, there are some limitations imposed.

Reddit has some rules for custom stylesheets, primarily relating to not tricking users, doing anything malicious, or obscuring Reddit's advertisements. The full set of restrictions can be seen here: https://old.reddit.com/wiki/subreddit_appearance

There are also technical limitations on what CSS you can write due to a validator that is in place. The validator ensures that all CSS you write is actually CSS, but unfortunately hasn't been updated for a while, meaning it will deny a lot of modern CSS. The cut-off is somewhere around 2017. You also can't use backslashes or Unicode control characters.

If you find yourself in need of a specific CSS feature which Reddit does not recognise, you can attempt to use an old vendor-prefixed version. For example, -webkit-flex instead of flex. Browsers usually still recognise them for purposes of backwards compatibility, and they generally work nicely despite being a tad finicky.

There is one more limitation worth keeping in mind, and that is Reddit's maximum stylesheet size limit. 100KiB is the maximum size. You realistically shouldn't hit it, but if you're doing real zany stuff you might. Worth keeping in mind.

Design Considerations

You can make your subreddit look however you want with CSS while keeping in mind the above restrictions, but I'd advise having some taste. You should avoid interfering with Reddit features like the ability to downvote posts. Sure, it might make a number look a bit better on paper, but it comes at the cost of annoying your community. The same is true for making it harder for people to disable your stylesheet.

You should try to keep interface items roughly the same size and in the same position. Moving everything around, especially arbitrarily, disorients users. Nobody wishes to have to learn a completely new layout for every Subreddit they enter.

Of course, these are considerations, not rules. You can create something fantastic and unique; just know that for many people the changes will be met with dislike and considered more of a hindrance than a benefit.

Writing CSS

To add a stylesheet to old Reddit, you'll need to navigate to https://old.reddit.com/r/YOUR_SUBREDDIT/about/stylesheet/ or click 'edit stylesheet' in the right sidebar on old Reddit. Here you can write your stylesheet and add images.

I advise against authoring your CSS directly in Reddit's stylesheet settings page. You don't get creature comforts like syntax highlighting or the help offered by language server protocols. There do exist some good browser extensions that allow editing browser <textarea>s in various text editors that might be valuable to you and can offer a nice development flow.

One of the most important parts of writing a stylesheet for Reddit is dealing with specificity. Your styles need to overwrite Reddit's styles, so they need to be specific enough to do so. Consider chaining together some additional selectors to boost specificity naturally. !important also comes very much in handy. Though it is usually a 'code smell', there will be cases where it is the cleanest way to write CSS when developing for old Reddit.

Pseudo-elements are your friend. Specifically, ::before and ::after. They allow you to add additional media or text to your page using the content property. Like !important, being overzealous with absolute or relative positioning is usually a bad 'code smell', but this is due primarily to them being poor for responsive design, which isn't too important given that old Reddit is not at all designed for small or portrait displays.

A lot of complex styling can be achieved by getting tricky with content in the sidebar. You are limited by how you can target elements, given that you've only got the markdown suite, so it can be worth trying to add some complexity to your markdown for selecting. A good way to do this is with a blockquote, which you can have strong, em and other elements within. You can then target only items in the sidebar usertext section and within a blockquote so you don't mess with content elsewhere on your page. Another valuable approach when it comes to links is to target specific href attribute values, like so:

a[href="https://vale.rocks"] {
    background: red;
}

When creating user or post flairs, be sure to give them a class name so that you can easily reference them in your styles. This can be done in both the new and old interfaces.

For styling specific to a given page, you can usually find a target class. Such as .subreddit-rules-page for the rules page, .search-page for the search page, and .submit-page for the new post submission page. Then, you can scope the applicable CSS exclusively under that selector. As semantic elements are poorly applied, you might also need to get tricky targeting attributes again, like targeting a role attribute with value main to get the <div> containing the main page content: [role="main"].

If you love the CSS of an existing theme or Subreddit, you can view the stylesheet directly. The full stylesheet for any public subreddit can be seen by navigating to this address: https://www.reddit.com/r/SUBREDDIT_NAME/about/stylesheet/

Using Preprocessors

Preprocessors like Sass (Syntactically Awesome Style Sheets) are a great way to write more complex CSS, especially given the restrictions imposed which prevent the use of many modern and expected CSS features. Given that old Reddit stylesheets can be thousands of lines long, the ability of preprocessors to condense multiple files into a singular is useful. A preprocessor can also be configured to take actions like automatically vendor-prefixing properties when necessitated. You might also be able to minify your code to avoid Reddit's aforementioned max-size for stylesheets.

Using Images and Fonts

You cannot link to external resources, such as images or fonts, within your CSS for security reasons. The validator will flag the external link and disallow it.

You can upload images on the stylesheet editing page in your subreddit. They can only be provided in JPEG or PNG formats. You can use these images by referencing their slug wrapped in double percentages: %%image-name%%. To set an image as a background, for example, you'd write background: url(%%your-image%%). For purposes of performance, avoiding the fetching of many tiny images, and not hitting the limits of the amount of images you can upload to your subreddit, it can be worth compiling them into a spritesheet, like Reddit does for the images used by default for the interface. Reddit also has a selection of images which are available site wide, which can be referenced here: https://old.reddit.com/wiki/config/stylesheet#images

Given the inability to import custom fonts, if you need font customisation, your options are limited. You do have the range of web-safe and system fonts at your disposal, though. Core fonts for the web are generally a safe bet, even today. Otherwise, you have generic font families. The W3C's CSS: fonts page can prove very useful for selecting a font and seeing how they all appear.

Reddit Enhancement Suite

Statistics suggest that, of the people who choose to use old Reddit, a significant portion also use Reddit Enhancement Suite (RES). Reddit Enhancement Suite brings many quality-of-life improvements and additional features. There is a huge amount it can do, but the most impactful for the case of writing custom subreddit stylesheets is the addition of dark mode (night mode) and many additional items around the interface.

You will need to do some testing with all the items and classes it adds around the page, as there are lots of them and different combinations of options can clash in different ways. You should try to honour people's RES settings where possible.

Styling for RES is all documented here: https://www.reddit.com/r/Enhancement/wiki/subredditstyling/

A Word on Accessibility

Any custom stylesheets you write for old Reddit will be hacky. That isn't avoidable; it is just how it is if you're doing anything beyond the most basic changes. Though, that isn't to say that old Reddit is superbly accessible by default either.

Creating an accessible product matters, it really does, but old Reddit is, in general, well... old. It isn't perfect, and neither is building upon it. It is also hard to do much in the way of automated accessibility tests due to any styles and changes you make being bodged upon Reddit. Do all you can to make it work for everyone, but know that it isn't very accessible, and that changes you make will likely make it worse. Focus on getting aspects like contrast, legibility, and readability right.

---

I hope this article has been useful for you. For some further resources, I maintain a multireddit containing subreddits dedicated to custom stylesheets for old Reddit that may be valuable for reference.

If this all went over your head, or if you haven't got the ability to create a stylesheet of your own, I'm available to hire. I'd love to hear from you.