Reddit Theming - Part 1: The Stylesheet

I've had several people ask me how I did some things on the theme I put together for the Tech News Today subreddit. Since that was pretty much the first reddit theme I ever played around with, I know that finding how-to's can be challenging. I am going to try to help by publishing a series of articles on the topic.

Before one can walk, one must first learn to crawl. If you want to create a reddit theme/stylesheet/css, you need to know where you are going to be spending most of your time. Assuming that you have created your subreddit you will see something that looks a little like this:


I've sprinkled in a few posts just to have something to look at, but you get the idea. This is pretty much the default look. Plain, simple and to the point. There is nothing wrong with this.

However, you would not be here if you were fine with plain, simple and to the point.

On the right side of the page you will find a box labeled "Moderation Tools".  Click the link for "community settings".

You will then see your subreddit's settings. All the way at the bottom in the "look and feel" section there is a link to "edit the stylesheet". Remember where that is because you will be clicking it. A lot.

Great. A blank slate. As you would expect, your first time in things are pretty sparse.


If you click the link to "show the default stylesheet", you will get an idea of what it is you are getting yourself into.


That is reddit's starting point. Our job is to override that cascading stylesheet (CSS) with a stylesheet of our own.

For instance, the page body has the following style applied by default:

body {
  font:normal x-small verdana, arial, helvetica, sans-serif;
  background-color:white;
  z-index:1;
}


If we want, we can do something crazy like make the background yellow. We could enter the following in the stylesheet textbox and hit the preview button:

body {
  background-color:yellow;
}


What you should see is this:


That is not at all attractive, but for the sake of illustration, it works.

In my next post, I will show you how I deconstruct the page and start making changes.