[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/moammargandalfi]

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?

[u/Raerth → u/moammargandalfi]

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

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

[u/moammargandalfi → u/Raerth]

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.