https://www.reddit.com/r/modguide/comments/dz7kzx/an_introduction_to_css/
created by JuulH on 20/11/2019 at 20:11 UTC*
21 upvotes, 3 top-level comments (showing 3)
What is CSS?
A stylesheet is a compilation of style rules. In this case it's a bunch of code that tells your browser how to display your subreddit. You can have rules for what colour things are, the font used, and more.
CSS is the language you use to write these rules.
Reddit allows you to style your own subreddit, using (slightly limited) CSS.
Any changes you make to your subreddit’s CSS won’t show up on reddit’s **Redesign or mobile app**.
You can edit your subreddit’s CSS by going to your subreddit (on old reddit) and clicking “edit stylesheet” in your subreddit’s sidebar,
or by going to https://old.reddit.com/YOURSUBREDDIT/about/stylesheet[2][3] (and replacing YOURSUBREDDIT with your subreddit’s name)
2: https://old.reddit.com/YOURSUBREDDIT/about/stylesheet
3: https://old.reddit.com/YOURSUBREDDIT/about/stylesheet
Here you can manually add CSS, preview it with the “Preview” button, and save it when you’re happy with what you got.
Even though it will only show up on old reddit, it’s still very useful (and easy!) to add CSS to your subreddit.
About a third of your users will still use old reddit instead of the redesign, and sometimes even more, as you can see in the stats for one of the subs I mod below.
​
Yellow is old reddit, blue is new reddit.
The admins also shared some statistics:
*“Sitewide, we see about 58% of our users on the redesign exclusively, 33% on legacy exclusively, and 9% using both in a given day.”*
*https://www.reddit.com/r/modnews/comments/954a8p/comment/e3rlwa2[4]*[5]
4: https://www.reddit.com/r/modnews/comments/954a8p/comment/e3rlwa2
5: https://www.reddit.com/r/modnews/comments/954a8p/comment/e3rlwa2
A bad looking subreddit could deter some of these users.
You can add images via the menu at the bottom on the “Edit Stylesheet” page.
To use images in your CSS, you will need to upload them here and give them a unique name to use in your CSS.
​
CSS Snippets are small pieces of CSS that can usually be copy-pasted to be used to do specific things, like change “Subscribers” to whatever you want, or change the image used for upvotes.
There are many places to find snippets on, for example:
Some commons CSS Snippets are:
6: https://www.reddit.com/r/csshelp/wiki/snippets
7: https://www.reddit.com/r/csshelp/wiki/snippets
8: https://www.reddit.com/r/csshelp/wiki/moresnippets
9: https://www.reddit.com/r/csshelp/wiki/moresnippets
12: https://www.reddit.com/r/CSSLibrary/
13: https://www.reddit.com/r/CSSLibrary/
14: https://www.reddit.com/r/CSSHelp
15: https://www.reddit.com/r/CSSHelp
/* Subscriber/Online Counters */
.titlebox .word {
display: none
}
.titlebox .number:after {
content: " Subscribers";
}
.titlebox .users-online span.number:after {
content: " Online now";
}
This changes “Subscribers” and “Online Now” to whatever you want to show.
​
An example of custom \"Subscribed\" and \"Online\" text.
/*Banner*/
##header {
background: url(%%Banner%%) 0 19px;
height: 200px;
}
##header-bottom-left {
position: absolute;
bottom: 0;
}
For more info on adding a banner on old reddit: https://www.reddit.com/r/modguide/comments/djbg69/how%5C_to%5C_add%5C_a%5C_banner/[16][17]
16: https://www.reddit.com/r/modguide/comments/djbg69/how%5C_to%5C_add%5C_a%5C_banner/
17: https://www.reddit.com/r/modguide/comments/djbg69/how_to_add_a_banner/
/*Simple Background*/
body {
background: url(%%Banner%%) no-repeat fixed center;
}
For the above to work, either name your image “Banner” or change “Banner” to your image name.
/*Add Image to Sidebar*/
div.side div.spacer:nth-of-type(1){
padding-top: 300px; /*Change "300px" to the height to the height of your image*/
background:url(%%SidebarImg%%) top center no-repeat;
}
For the above to work, either name your image “SidebarImg” or change “SidebarImg” to your image name.
div.side div.spacer:nth-of-type(1):before{
display:block;
margin-top: 10px;
width: 300px;
content: "This is a caption, edit me to add your own caption.";
padding: 0 0 10px;
text-align: center; /*delete this line if you no longer want the text centered*/
font-family: Georgia, serif; /*Delete this line if you like the normal font better*/
font-size: small; /*Change the font-size to your liking*/
}
/*Arrows*/
.thing .arrow {
height: 25px;
width: 25px;
}
.arrow.up {
background: url(%%UpUnclicked%%);
}
.arrow.upmod {
background: url(%%UpClicked%%);
}
.arrow.down {
background: url(%%DownUnclicked%%);
}
.arrow.downmod {
background: url(%%DownClicked%%);
}
/*Optional: This allows arrows wider than 15px, you can change 25px to the width of your arrows*/
.midcol { min-width:25px !important; }
Remember to either upload your files as named above, or edit it to fit your image name.
Change your subreddit’s name color:
/*Your subreddit's name*/
.redditname a {
color: #fff; /*Change to make your subreddit name a different color*/
font-size: 25px; /*Font size of it*/
}
/*Change your subreddit name color*/
.redditname a {
color: #fff; /*Change to make your subreddit name a different color*/
font-size: 25px; /*Font size of it*/
}
.redditname a:hover {
color: #fff; /*Choose the color for it when hovering over it*/
text-decoration:none;
}
Next Guide: CSS Themes Pt. 1[18].
18: https://www.reddit.com/r/modguide/comments/g0ufbn/css_themes_pt1_finding_and_adding_a_theme/
If you have any more questions, ask in the comments and we'll try to answer them!
Comment by JuulH at 20/11/2019 at 21:00 UTC
6 upvotes, 0 direct replies
Just updated it to add images! Hopefully it should work now.
Comment by [deleted] at 25/11/2019 at 15:34 UTC
4 upvotes, 0 direct replies
For those that weren't around for the redesign, a lot of the commonly used css stuff was specifically made into built-in options for "new" Reddit. I'd say the majority of css was used to dress up the appearance of a sub, but there are a few scripts out there that do other fancy stuff too.
Also note that none of this affects mobile users, which currently dwarf the users on "old" desktop Reddit and "new" desktop Reddit *combined*.
Comment by RyanthemanO4 at 19/12/2019 at 08:14 UTC
2 upvotes, 1 direct replies
With all this useful information, this can really help my subreddit a lot and beneficial for me on the long run.
Thank you for the info!