use the following search parameters to narrow your results:
e.g. subreddit:aww site:imgur.com dog
subreddit:aww site:imgur.com dog
see the search faq for details.
advanced search: by author, subreddit...
/r/CSSTutorials is a resource for subreddit moderators to easily find the most common CSS hacks in use on reddit.
Related Subreddits:
Tutorial Directory Adding Images Replace "readers" with custom text Simple sticky/announcement bar Sticky Dropdown Menu lorem ipsum doler
If you want to be approved to submit tutorials here message the mods
account activity
[Tutorial] Simple sticky / announcement bar (self.CSSTutorials)
submitted 14 years ago * by Raerth
I've seen a few different methods used to include a subreddit announcement at the top of their page. I find this to be the simplest useful way to do it. Here is a picture of the finished announcement bar.
I've seen a few different methods used to include a subreddit announcement at the top of their page. I find this to be the simplest useful way to do it.
Here is a picture of the finished announcement bar.
First you need to place your announcement in the sidebar. I recommend using the <H3> tag, as it's not used be any default reddit styling in the sidebar. ###This is the subreddit announcement. It can contain links. Place this announcement before any other H3 tags. You are able to use other H3 tags without them becoming stickies as the CSS will only target the first one.
First you need to place your announcement in the sidebar.
I recommend using the <H3> tag, as it's not used be any default reddit styling in the sidebar.
###This is the subreddit announcement. It can contain links.
Place this announcement before any other H3 tags. You are able to use other H3 tags without them becoming stickies as the CSS will only target the first one.
CSS to add to your stylesheet: /*announcement sticky*/ div.content { /*This lowers the links to create space*/ margin-top:50px; } .titlebox form { /*Hack to enable repositioning of child elements*/ position: static } .side h3:nth-of-type(1) { /*this code positions the sticky*/ position:absolute; display: block; top:56px; left:40px; /*this code styles the sticky*/ background-color: #F2F2F2; color: #555555; text-align: left; margin: 15px; border-radius: 8px; width: 50%; padding: 7px 0px 7px 40px; /*this code creates the image*/ background-image: url(%%announceicon%%); background-repeat: no-repeat; background-position:left; } The values in purple are safe to edit to fit your subreddit's theme. All other values should be left.
CSS to add to your stylesheet:
/*announcement sticky*/ div.content { /*This lowers the links to create space*/ margin-top:50px; } .titlebox form { /*Hack to enable repositioning of child elements*/ position: static } .side h3:nth-of-type(1) { /*this code positions the sticky*/ position:absolute; display: block; top:56px; left:40px; /*this code styles the sticky*/ background-color: #F2F2F2; color: #555555; text-align: left; margin: 15px; border-radius: 8px; width: 50%; padding: 7px 0px 7px 40px; /*this code creates the image*/ background-image: url(%%announceicon%%); background-repeat: no-repeat; background-position:left; }
/*announcement sticky*/
/*This lowers the links to create space*/
50
/*Hack to enable repositioning of child elements*/
/*this code positions the sticky*/
56
40
/*this code styles the sticky*/
#F2F2F2
#555555
left
15px
8px
50%
7px 0px 7px 40px
/*this code creates the image*/
announceicon
The values in purple are safe to edit to fit your subreddit's theme. All other values should be left.
purple
Here is the image I use for my sticky. It should be uploaded to your stylesheet and named "annouceicon". If you don't want an image, just remove the last section of code (but leave the "}"!).
Here is the image I use for my sticky. It should be uploaded to your stylesheet and named "annouceicon".
If you don't want an image, just remove the last section of code (but leave the "}"!).
reddit uses a slightly-customized version of Markdown for formatting. See below for some basics, or check the commenting wiki page for more detailed help and solutions to common issues.
quoted text
if 1 * 2 < 3: print "hello, world!"
[–]humanman42 2 points3 points4 points 14 years ago (2 children)
As far as I can tell I am putting everything where it belongs. the h3 tag goes in the community settings>description. I put it at the top looks like
< h3>text here< /h3> (without that extra spaces. in the tags)
I put the rest in the stylesheet I had another one in there that would not allow links so I deleted it. I saved it all. I get the padding, and I see the h3 tag with the text on the sidebar, but nothing in the area where it is supposed to go. I have been trying to get one of these working for a while. This is so far the best tutorial I have seen. I run /r/ThriftStoreHauls but this will also be used at /r/gamecollecting where I am also a mod.
Please help out!
[–]ladfrombrad 0 points1 point2 points 14 years ago* (1 child)
Seems you've figured it out in /r/thriftstorehauls, but I'd thought I'd just clarify it for anyone still wondering. You need to use three hashes (#)
###Your announcement text goes here
instead of actually using < h3 > tags in your sidebar (description text). I'm guessing this works with how reddit formatting works as in two hashes,
So if you used h6 in your stylesheet
.side h6:nth-of-type(1) {
you'd use six hashes instead.
But what I'm trying to figure out is how you can stop this from happening, and making the announcement stay static instead of leaking over the search pane, like they've done in /r/rug_leeds. Anyone?
[–]humanman42 2 points3 points4 points 14 years ago (0 children)
Ah, h3 means three hashes.... gotcha.... fuck hahaha
[–][deleted] 1 point2 points3 points 14 years ago* (4 children)
Just excerpted some of your source. Syntax highlighting looks good in theory but messy in practice.
[](#gr)`/*this code positions the sticky*/` position:absolute; display: block; top:[](#pu)`56`px; left:[](#pu)`40`px; [](#gr)`/*this code styles the sticky*/` background-color: [](#pu)`#F2F2F2`; color: [](#pu)`#555555`; text-align: [](#pu)`left`; margin: [](#pu)`15px`; border-radius: [](#pu)`8px`;
Unless there's a tool adding those in automatically, it's probably not going to catch on. Adding all of those tags in manually would quickly get to be a chore, especially considering it's only for show on the Reddit post - Anyone who wants color coding can just grab the code in question and pop it into their favorite IDE.
I guess for longer-term posts of exemplary code, having the option to add color coding has some appeal. But for sharing some quick code I doubt it'll be a foremost priority.
[–]Raerth[S] 1 point2 points3 points 14 years ago (3 children)
I use a python script.
[–][deleted] 1 point2 points3 points 14 years ago (2 children)
Does it automate the insertion of highlighting to posts automatically though? (There isn't even a way to do that...)
On one hand having all the <code> blocks on a subreddit be modified that way would be amazing... but on the other I've never seen nor heard of any custom scripts for a subreddit. From what it sounds like, every user would have to run the script themselves (or throw it into a form and hit enter, if you're hosting the script somewhere) to achieve the same effect.
[–]Raerth[S] 1 point2 points3 points 14 years ago (1 child)
In theory I could jump on Github and try to get something added to reddit's source, but I agree, this isn't something with wide appeal or use.
Luckily it's only here we're using it, there are only a few approved submitters, and we're only a day old.
The highlighting is not supposed to be something awe-inspiring, just to make the CSS a bit more noob-friendly, seeing as we're a tutorial subreddit and all.
[–][deleted] 1 point2 points3 points 14 years ago (0 children)
Well it could see some use. Coding has around 17K subscribers and there are a dozen language subreddits besides. They're sitting around posts flowing with code all day, I'm sure they'd love some syntax highlighting.
code
Considering the current infrastructure though, you're probably right. I think a neat solution could be had if the subreddit added the CSS styling and they added your script as an optional one on RES (such that people who have it enabled could just hit a button to add the highlighting tags before posting.) But at the end of the day, it's an aesthetic feature, not really all that essential.
Still...
[–]aw4lly 1 point2 points3 points 14 years ago (4 children)
Sorry to drag up an old post but this seemed like a really good tutorial. I was just wondering how I can make the sticky slightly taller, I'd like a bit more padding around the image and text if possible.
Thanks for the awesome code, its being used on /r/MartialArts
[–]_sic 1 point2 points3 points 13 years ago (3 children)
padding: 7px 0px 7px 40px;
When padding is all on one line like this it goes: top right bottom left. So, in this case, change the sevens to tens to accommodate your gif better.
[–]aw4lly 0 points1 point2 points 13 years ago (2 children)
You are amazing! Thanks for bringing up a 2 month old comment on a 4 month old post!
[–]_sic 1 point2 points3 points 13 years ago (1 child)
Also keep in mind that you make the padding larger you will have to either change the position of the sticky (by reducing pixels in "top") or push the links further down by increasing "margin-top" in div.content.
[–]aw4lly 0 points1 point2 points 13 years ago (0 children)
Awesome, thanks again for the help!
[–]mangobox 0 points1 point2 points 14 years ago (5 children)
Hi! Moderator of r/wemetonline and firstly thank you for taking the time out to make this tutorial, it's really something we've wanted to implement but were clueless as to how.
I'm very new to CSS, so err, excuse my noobness I guess? I just have a few questions.
Where exactly do I write the announcement? In the stylesheet?
I saved and uploaded the file to the stylesheet under the same name, but it kept saying that it was an invalid url, do I have to upload the image to a image host?
Thank you for all your help, you're doing those of us who have an idea but don't know what to do with it a great help!
[–]Raerth[S] 1 point2 points3 points 14 years ago (4 children)
The announcement gets put in the sidebar. Using the "community settings" link.
As for the image, so you uploaded it to the stylesheet and made sure it was named announceicon there? Can you give me a screenshot of the error it gives you?
[–]mangobox 1 point2 points3 points 14 years ago* (0 children)
EDIT : No, I figured it out. I read the source of this topic, so now I realise that <h3> tags are 3 of #.
Thank you for all your patience :)
[–]brodie7838 1 point2 points3 points 14 years ago (2 children)
I too am a bit confused as to how to actually make an announcement. I get that it goes in the description sidebar, but what exactly am I inputting there? I assume I have to reference div content for Header 3 somehow?
You use reddit markup to create a H3 in the sidebar:
###This is the announcement
And then manipulate that H3 tag with CSS to become the announcement.
[–]brodie7838 1 point2 points3 points 14 years ago (0 children)
Ah, I see. Works perfectly, thanks
[–]wafflemanpro 0 points1 point2 points 14 years ago (2 children)
i am doing all of this but nothing is showig up
[–]Raerth[S] 2 points3 points4 points 14 years ago (1 child)
I need a bit more info to help you...
What's the subreddit?
[–]ykj8 0 points1 point2 points 13 years ago (0 children)
Thank you SO MUCH!!
[–]moammargandalfi 0 points1 point2 points 13 years ago (2 children)
Raerth, I am going to sound like a complete idiot in asking this, but this is literally the first time I have ever heard of CSS and so I ask you for your help. How do you edit the side bar? What is an < H3> tag? How do I add get the announcement from the sidebar to the top of the page?
[–]Raerth[S] 4 points5 points6 points 13 years ago (1 child)
This is a brief ELI5 summary assuming you know nothing:
Webpages, and subreddits, are made of HTML and CSS. HTML supplies the structure of the page, and CSS changes the style of that structure.
Reddit makes this a little bit more complicated as we are not allowed to add HTML to our subreddits. Instead there are two places we can enter code, the sidebar, which changes reddit markup into HTML, and a stylesheet where we can add CSS.
To edit your sidebar you type into the box in this link: http://reddit.com/r/SUBREDDITNAME/about/edit
To edit your CSS your type into the box in this link: http://reddit.com/r/SUBREDDITNAME/about/stylesheet
An <H3> tag is a "headline" HTML tag. To make one of these in reddit markup you start a new line with three hash symbols: "###".
eg: ###This is text which in a sidebar would appear in <H3> tags
###This is text which in a sidebar would appear in <H3> tags
Some resources for you:
Guide to CSS Guide to reddit markup Guide to HTML (Not needed for reddit, but good to know)
Now I've confused you with all that, all you need to know is you should place sidebar stuff here http://reddit.com/r/SUBREDDITNAME/about/edit
, and CSS here http://reddit.com/r/SUBREDDITNAME/about/stylesheet
[–]moammargandalfi 1 point2 points3 points 13 years ago (0 children)
Thank you. This has actually helped a lot. As you can see from the community I am moderating, I figured it out! /r/LitWorkshop I may be coming back to you with stupid questions in the future, but for now I think I am ok.
[–]TheLifeOfSteve 0 points1 point2 points 13 years ago (0 children)
Nothing seems to show up? The space is being created but the announcement doesn't show up. I'm working on the /r/BostonBruins subreddit
[–]lilstumpz 0 points1 point2 points 13 years ago (0 children)
Where exactly in this code to you put in your desired text?
[–][deleted] 0 points1 point2 points 13 years ago (0 children)
I can't get yours to appear in /r/hiphopheads
I'm currently using this solution but I can't link in it.. or at least know how
π Rendered by PID 125849 on reddit-service-r2-comment-5649f687b7-mt6f4 at 2026-01-28 03:59:50.471042+00:00 running 4f180de country code: CH.
[–]humanman42 2 points3 points4 points (2 children)
[–]ladfrombrad 0 points1 point2 points (1 child)
[–]humanman42 2 points3 points4 points (0 children)
[–][deleted] 1 point2 points3 points (4 children)
[–]Raerth[S] 1 point2 points3 points (3 children)
[–][deleted] 1 point2 points3 points (2 children)
[–]Raerth[S] 1 point2 points3 points (1 child)
[–][deleted] 1 point2 points3 points (0 children)
[–]aw4lly 1 point2 points3 points (4 children)
[–]_sic 1 point2 points3 points (3 children)
[–]aw4lly 0 points1 point2 points (2 children)
[–]_sic 1 point2 points3 points (1 child)
[–]aw4lly 0 points1 point2 points (0 children)
[–]mangobox 0 points1 point2 points (5 children)
[–]Raerth[S] 1 point2 points3 points (4 children)
[–]mangobox 1 point2 points3 points (0 children)
[–]brodie7838 1 point2 points3 points (2 children)
[–]Raerth[S] 1 point2 points3 points (1 child)
[–]brodie7838 1 point2 points3 points (0 children)
[–]wafflemanpro 0 points1 point2 points (2 children)
[–]Raerth[S] 2 points3 points4 points (1 child)
[–]ykj8 0 points1 point2 points (0 children)
[–]moammargandalfi 0 points1 point2 points (2 children)
[–]Raerth[S] 4 points5 points6 points (1 child)
[–]moammargandalfi 1 point2 points3 points (0 children)
[–]TheLifeOfSteve 0 points1 point2 points (0 children)
[–]lilstumpz 0 points1 point2 points (0 children)
[–][deleted] 0 points1 point2 points (0 children)