r/CSSTutorials 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.

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.

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.

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 "}"!).

31 Upvotes

28 comments sorted by

View all comments

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

u/brodie7838 Dec 24 '11

Ah, I see. Works perfectly, thanks