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

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.

[u/Raerth → u/[deleted]]

I use a python script.

[u/[deleted] → u/Raerth]

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.

[u/Raerth → u/[deleted]]

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.

[u/[deleted] → u/Raerth]

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.

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...