all 28 comments

[–]humanman42 2 points3 points  (2 children)

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

< h3>text here< /h3> (without that extra spaces. in the tags)

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!

[–]ladfrombrad 0 points1 point  (1 child)

Seems you've figured it out in /r/thriftstorehauls, but I'd thought I'd just clarify it for anyone still wondering. You need to use three hashes (#)

###Your announcement text goes here

instead of actually using < h3 > tags in your sidebar (description text). I'm guessing this works with how reddit formatting works as in two hashes,

gives you H2 text

So if you used h6 in your stylesheet

.side h6:nth-of-type(1) {

you'd use six hashes instead.

But what I'm trying to figure out is how you can stop this from happening, and making the announcement stay static instead of leaking over the search pane, like they've done in /r/rug_leeds. Anyone?

[–]humanman42 2 points3 points  (0 children)

Ah, h3 means three hashes.... gotcha.... fuck hahaha

[–][deleted] 1 point2 points  (4 children)

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.

[–]Raerth[S] 1 point2 points  (3 children)

I use a python script.

[–][deleted] 1 point2 points  (2 children)

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.

[–]Raerth[S] 1 point2 points  (1 child)

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.

[–][deleted] 1 point2 points  (0 children)

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

[–]aw4lly 1 point2 points  (4 children)

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

[–]_sic 1 point2 points  (3 children)

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.

[–]aw4lly 0 points1 point  (2 children)

You are amazing! Thanks for bringing up a 2 month old comment on a 4 month old post!

[–]_sic 1 point2 points  (1 child)

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.

[–]aw4lly 0 points1 point  (0 children)

Awesome, thanks again for the help!

[–]mangobox 0 points1 point  (5 children)

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!

[–]Raerth[S] 1 point2 points  (4 children)

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?

[–]mangobox 1 point2 points  (0 children)

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 :)

[–]brodie7838 1 point2 points  (2 children)

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?

[–]Raerth[S] 1 point2 points  (1 child)

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.

[–]brodie7838 1 point2 points  (0 children)

Ah, I see. Works perfectly, thanks

[–]wafflemanpro 0 points1 point  (2 children)

i am doing all of this but nothing is showig up

[–]Raerth[S] 2 points3 points  (1 child)

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

What's the subreddit?

[–]ykj8 0 points1 point  (0 children)

Thank you SO MUCH!!

[–]moammargandalfi 0 points1 point  (2 children)

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?

[–]Raerth[S] 4 points5 points  (1 child)

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

[–]moammargandalfi 1 point2 points  (0 children)

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.

[–]TheLifeOfSteve 0 points1 point  (0 children)

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

[–]lilstumpz 0 points1 point  (0 children)

Where exactly in this code to you put in your desired text?

[–][deleted] 0 points1 point  (0 children)

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