Reddit is a unique community in that anyone can create a subdivision of Reddit and add to it. There are many subreddits that cover tv shows, movies, games and other topics like cooking or sports. In these subreddits, community members add links and pictures and can vote up or down to determine how the submissions will be displayed on the subreddit front page.
Reddit recently began allowing its users the opportunity to create and customize their own subreddits using a bit of CSS wizardry to override stylesheet entries and manipulate the background. The result can be very interesting, with custom background pictures or a custom Reddit logo.
Depending on what you want to do, Reddit can be very easy to work with. You’ll need a modern web browser with some kind of code inspector (both Firefox and Chrome have this built into their current versions). I would also recommend Notepad++ or your favorite text editor.
Start by opening a given Reddit and bring up your inspector. When you highlight a portion of a page, your inspector will point out where in the source code the element is located. Here, I’ve highlighted header section.
Look for the “Div” and note the class. In this case, the div class is header-bottom-left. If I make an entry into my style sheet for #Header-bottom-left, I’ll be able to override the current styles and apply my own. Some examples:
- Use “background-image” to swap out a background picture
- Use “position” to space it out (I find 100-200 pixels works well with a background that is 1000px wide)
- Reddit supports CSS3, so use a gradient!
Don’t forget to view r/CSShelp for basic info about how to get started.
You can greatly alter how your subreddit works by customizing even more elements. You can add your own custom flair (these are like badges users earn by participating in your community), you can swap out the default Reddit logo for one of your own creation, or you can eliminate down votes.
Some subreddits have added animated gifs to their header or side bar images, all by overriding the CSS. @Rules don’t work, so you won’t be able to import custom CSS3 fonts. You can also change the direction of the arrows (instead of up or down vote you can have left and right vote).
Many subreddits have excellent stylesheet examples, but I just found this one from r/2channel. If you’re looking to brush up on CSS, or you just want a new place to gather a group of like minded people, now you have everything you need to build a beautiful community!