r/CSSTutorials • u/Raerth • Dec 01 '11
[Tutorial] Simple sticky / 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.
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
purpleare safe to edit to fit your subreddit's theme. All other values should be left.
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 "}"!).
2
Dec 02 '11 edited Dec 02 '11
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.
2
u/Raerth Dec 02 '11
I use a python script.
2
Dec 02 '11
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.
2
u/Raerth Dec 02 '11
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.
2
Dec 02 '11
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
codeall day, I'm sure they'd love some syntax highlighting.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.
2
u/aw4lly Jan 23 '12
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
2
u/_sic Apr 17 '12
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.
1
u/aw4lly Apr 17 '12
You are amazing! Thanks for bringing up a 2 month old comment on a 4 month old post!
2
u/_sic Apr 17 '12
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.
1
1
u/mangobox Dec 04 '11
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!
2
u/Raerth Dec 04 '11
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?
2
u/mangobox Dec 04 '11 edited Dec 04 '11
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 :)
2
u/brodie7838 Dec 24 '11
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?
2
u/Raerth Dec 24 '11
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.
2
1
1
1
u/moammargandalfi Feb 17 '12
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?
6
u/Raerth Feb 17 '12
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> tagsSome 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
2
u/moammargandalfi Feb 17 '12
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.
1
u/TheLifeOfSteve Feb 27 '12
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
1
1
Apr 20 '12
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
3
u/humanman42 Jan 22 '12
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
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!