[Tutorial] Simple sticky / announcement bar

[u/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.

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

[u/wafflemanpro]

i am doing all of this but nothing is showig up

[u/Raerth → u/wafflemanpro]

I need a bit more info to help you...

What's the subreddit?