https://www.reddit.com/r/modguide/comments/fgjq3n/community_sidebar_oldclassiclegacy_reddit/
created by SolariaHues on 10/03/2020 at 19:44 UTC*
24 upvotes, 0 top-level comments (showing 0)
The old reddit sidebar is edited via your community settings. This guide will show you how to edit it and make it look nice.
​
Reddit has two designs or interfaces. New users will probably only have experience of new reddit/redesign. Old/classic/legacy reddit is the old interface. Both new and old layouts exist together and it's important for mods to keep both up to date.
Using redesign mod tools[1]
Using classic reddit for the first time[2]
1: https://www.reddit.com/r/modguide/comments/elfwfq/transitioning_from_old_to_redesign/
2: https://www.reddit.com/r/modguide/comments/emduif/using_classic_reddit_for_the_first_time/
Go to mod tools at the bottom of your sidebar (in old), and select subreddit settings.
​
Image showing old reddit mod tools and the subreddit settings option
Fill out the sidebar box with your sidebar content.
​
Image showing the sidebar box in old reddit subreddit settings
Scroll down and hit save at the bottom of the page.
Old reddit sidebar formatting is done with Markdown:
3: https://www.reddit.com/r/modguide/comments/dn18o5/subreddit_wikis/
For further formatting help see: Reddit's commenting guide[6] | Raerth's guide[7] | Markdown primer[8]
6: https://www.reddit.com/wiki/commenting
7: https://www.reddit.com/r/raerth/comments/cw70q/reddit_comment_formatting/
As the old. reddit sidebar isn't made of customisable widgets, like the new/redesign one, you can use CSS to apply styling to your sidebar; You can find and use CSS snippets, write your own CSS, or use a pre-written theme to style your subreddit.
Some themes come with instructions for using markdown and CSS to style your sidebar, such as the theme used here on OrnithologyUK[11].
9: https://www.reddit.com/r/modguide/comments/dz7kzx/an_introduction_to_css/
10: https://www.reddit.com/r/modguide/comments/g0ufbn/css_themes_pt1_finding_and_adding_a_theme/
The theme used in this case is Minimaluminiumalism[12]. You can find themes at r/themes.
12: https://www.reddit.com/r/Minimaluminiumalism/wiki/index
Here are some CSS snippets we are using on modguide:
/*side bar text and background colour*/
.side .md { color: #000000; background: #ffffff none; font-size: 1em; line-height: 2.5; }
.side h1 {
border-bottom: 1px solid #000000;
text-align: center;
font-size: 22px !important;
}
You can edit these snippets to suit your subreddit. For example by changing the colour: #000000 above to #389ce6 the text colour goes from black to blue.
You can find colour codes on sites like these: Colour-hex.com[13] | w3schools colour picker[14] | colorhexa[15]
13: https://www.color-hex.com/color-palettes/
14: https://www.w3schools.com/colors/colors_picker.asp
15: https://www.colorhexa.com/
/* Sidebar buttons */
.side .md h3 a {
display: block;
border: 1px solid #0495ff;
font-size: 12px;
padding: 5px;
border-radius: 3px;
background-color: none;
color: #0495ff;
text-overflow: ellipsis;
font-weight: bold;
line-height: 25px;
text-align: center;
transition: background-color .5s;
}
.side .md h3 a:before {
content: '';
display: inline-block;
background: url(%%bulb-1%%);
background-repeat: no-repeat;
width: 39px;
height: 25px;
background-size: contain;
right: 258px;
position: absolute;
}
.side .md h3 a:hover {
text-decoration: none;
color: #FFF;
background-color: #0495ff;
}
And here (above) if you change `border: 1px solid #0495ff;` to #000000 the blue border of our button links goes from blue to black.
This bit `background: url(%%bulb-1%%);` refers to the light bulb image used in our buttons - images need to be uploaded to the stylesheet. See the Intro to CSS guide.
/* Filter buttons (from r/community_chat and r/SubChats) */
.side a[href="#button"] + a {
position: static;
width: 290px!important;
border: 1px solid #0495ff;
z-index: 50;
margin-left: 2px;
background-color: none;
color: #0495ff;
padding: 2px;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
overflow: hidden;
transition: all .5s ease;
text-decoration: none!important;
}
This bit (below) changes the button appearance on hover (when your pointer is over it).
.side a[href="#button"] + a:hover {
background-color: #0495ff;
color: #FFF;
}
Image of the finished sidebar and the markdown formatted text[16] that was further styled with these snippets.
See r/csshelp and their sidebar for further help with CSS.
---
18: https://imgur.com/a/JT9Kf33
20: https://www.reddit.com/r/modguide/comments/e5moia/modding_on_mobile/
22: https://new.reddit.com/r/modguide/comments/ff14q4/community_sidebar_new_redditredesign/
Thanks u/MajorParadox who formatted and styled our sidebar.
There's nothing here!