Let's look back at some memorable moments and interesting insights from last year.

Your top 1 posts:

• "Happy Cakeday, r/CSSTutorials! Today you're 10" by u/AutoModerator

Let's look back at some memorable moments and interesting insights from last year.

Your top 1 posts:

• "Happy Cakeday, r/CSSTutorials! Today you're 9" by u/AutoModerator

Pre-information

Any logged-in user, who is not subscribed will be forced to see the rules. If they press the accept button, they are redirected to ac.reddit.com/r/subredditname, where the subreddit looks the same to a logged out or subscribed reader. By pressing reject, the user is redirected to reddit.com.

Part 1: Sidebar

Firstly, this uses blockquotes from your sidebar. anything in blockquotes will be put in the rules. First line should use header1 (#)followed by a title. Rules should be in an ordered list. Make sure to have the accept and reject buttons.

Example of what your sidebar should look like:

>#These are test rules
>
>1. don't be bad meme
>2. follow rule 1
>
>##[accept](http://ac.reddit.com/r/SUBREDDITNAME) [reject](http://www.reddit.com) 

ALL YOUR OTHER SHIT

Part 2: CSS

Copy and paste everything in /r/rulescss/about/stylesheet. Remember you will have to adjust a value due to length of rules. Ctrl+f "adjust accordingly"

#This ones a quickee

##General code

 *your choice of the below items, separated, by commas*
     {
     display: none!important;
     }

##So if you want to remove all downvotes it would be:

#siteTable .midcol div.score, #siteTable .arrow.down, .sidecontentbox .midcol div.score, .sidecontentbox .arrow.down, .sitetable.nestedlisting .arrow.down
    {
           display: none!important;
    }

##And just comment downvotes:

.sitetable.nestedlisting .arrow.down 
    {
           display: none!important;
    }

The other method of redirecting didn't work for me :/

##You can see this method in action at /r/raotf2 and /r/nmtf2i ##Well here's the CSS, just copy and paste the below and follow all notes:

/* Created by /u/angrypotato1 leave this in plox */

.bottom:after

{

text-align: left;
font-size: 8pt !important;
content: "| css by /u/angrypotato1" !important;

}

/* Actual forwarding part, make a post with the link to where you want to forward */

/* Tutorial can be found here: http://www.reddit.com/r/CSSTutorials/comments/1ig13g/tutorial_alternative_method_of_subreddit/ */

/* Make sure to turn on "show thumbnail images of content" in

http://www.reddit.com/r/yoursubreddit/about/edit/ > other options */

.thing .thumbnail.default:nth-of-type(1)

{

z-index: auto !important;
position: fixed !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: 100% !important;
background-color: #fff !important;
color: #000;
display: block !important;
text-align: center !important;
line-height: 400px;
font-weight: bold !important;
font-style: oblique !important;
font-size: 16pt !important;
max-height:100%;
background-image:url(%%farewell%%); 

/* use what ever image you want, good sizing should be between 300*300 and 500*500. Image I used: http://e.thumbs.redditmedia.com/Gtq9gmtx_0GN2xY4.png */

background-position:0 0;
display: block;
margin-left: 100px;
margin-right: auto;
visibility:visible !important; 

}

/* Shows your name, optional */

.bottom

{

 visibility:visible;
 display: block !important;
 position: fixed !important;
 left: 0 !important;
 top: 0 !important;
 max-height: none!important;
 max-width: none!important;
 height: auto !important;
 width: auto !important;
 overflow: auto !important;
 text-indent: 0 !important;
 font-size: 12px !important;
 z-index: 2147483647 !important;
 color: #000 !important;
 margin-left:100px;
 margin-top:500px;

}

/* Hides junk */

.content, .side, #header, span.age

{

 visibility: hidden;

}

span.age

{

display: none;

}

/* Makes it look nicer */

body

{

 background-color: #fff !important;
 color: #fff;

}

/* Removes tickbox thanks to /u/p337 will not hide it for moderators*/

body:not(.moderator).res .titlebox>div:first-of-type:after

{

 content: "test test test test test test test test test";
 min-width: 400px!important;
 position: absolute;
 background-color: white;
 top: 0px;
 left: -150px;
 z-index: 2147483647;

}

http://www.reddit.com/r/andytuba/wiki/emotes

^(This thread is for question/discussions regarding this tutorial.)

So we've all seen those communities that are split between 3-4 subreddits for no apparent reason. Well, with this redirect code, you can redirect any number of subreddits to one final destination, effectively combining the communities. Providing you have the moderators permission of course... (you might want to give them mod privileges in your sub as incentive!)

Now, there's two different types of redirect you can do:

• If there's content in the subreddit you'd like to keep in the archives of that sub, you can restrict the sub so that users can't post anymore, and put a redirect image in the header. For that redirect, please use this image

• If you just want to effectively make the subreddit invisible and redirect all traffic from it to your subreddit, then use this image instead

Once you have the image downloaded, rename it "redirect-image" (without the quotes) and:

• go to http://reddit.com/r/thissubreddit/about/stylesheet (replace 'thissubreddit' with the name of the subreddit you want to do the redirect on)

• click 'browse'

• upload the respective image to your subreddit.

Now, for the coding. All you have to do is copy/paste the code you want into the stylesheet, and place a link to the subreddit you want this sub to be redirected to (/r/yoursubreddit) in the sidebar.

This snippet will give you a redirect header:

.titlebox a[href*="/r/yoursubreddit"] {
    position: fixed;
    background-color: #fff;
    background-image: url(%%redirect-image%%);
    background-repeat: no-repeat;
    background-position: top center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 500;

}

And this snippet will give you the full-page redirect, blocking out the front page of the subreddit:

.titlebox a[href*="/r/yoursubreddit"] {
    position: fixed;
    background-color: #fff;
    background-image: url(%%redirect-image%%);
    background-repeat: no-repeat;
    background-position: top center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;

}

Notice the only difference is line 10. The "%" and "px" make all the difference.

Now before you save, make sure you change the "yoursubreddit" in the coding to the name of the subreddit you want to redirect to (your destination subreddit). Once you save it, the redirect will be complete!

For the header image redirect, you'll still want to restrict posting new content to this subreddit, so go to community settings, and under 'type', click the radio button next to 'restricted - anyone can view, but only some are approved to submit links'. Now, users can view and search content in the subreddit's archive, but will not be able to post.

Check out /r/swedishsnus for an example of the full-page redirect. The only way to undo this redirect is to go to your preferences and under 'display options', uncheck the box next to 'allow reddits to show me custom styles'. Now you'll be able to go to http://reddit.com/r/thissubreddit/about/stylesheet and delete that code, if you ever change your mind. Now that I think of it, you might want to put a link to /r/yoursubreddit in the sidebar of the subreddit you're doing the redirect on, for those users who browse reddit like this all the time.

If you found this tutorial useful, please upvote it so I know how many people I was able to help! Obligatory "It's a self-post so no karma" statement.

If this code didn't work exactly the way I said it would, please leave me a comment or PM me and I will troubleshoot with you.

Thanks to Notemiso for teaching me this procedure.

Subreddit stylesheets can only link to images which are on the reddit servers. Although this typically limits mods to using images they have uploaded to their subreddit, it also allows for using images which reddit devs have put on the server.

The main benefit to this is sneaking in an animated GIF, which you can't upload as a subreddit image as of writing this.

#What images can I use?

For a list of available images, check out the /static/ file list on reddit's github. Click on the filename to see the image itself.

You can use any image in this folder or its children folders. Images have filenames that end in .gif, ..png, and .jpg. Animated images usually end in .gif.

#How do I use them?

In a stylesheet, you can link to these images in using url(/static/filename.png). Use this in the same way as url(%%uploadedimage%%).

#Examples

Add Snoo (the reddit alien) to your subreddit:

body { 
   background-image: url(/static/snoo-tray.png);
   background-position: left 200px; 
   background-repeat: no-repeat;
}

or link to a iPhone-friendly page:

.side a[href="http://www.example.com/mobilereddit.html"] {
   /* styles a link in the sidebar for [](http://www.example.com/mobilereddit.html) */
   display: block;
   height: 60px;
   width: 60px;

   background: url(/static/iphone/iReddit-thumb.png) center center no-repeat;
}

This tutorial explains how to replace the default reddit logo with a custom image for your subreddit (screenshot).

To replace this image, go to:

• go to your subreddit,
• look in the sidebar for "moderator tools"
• click "subreddit settings" (http://www.reddit.com/r/YourSubredditHere/about/edit), (screenshot)
• scroll down to "look and feel"
• "upload header image" , (screenshot) (The "choose file" box may look different depending on your browser.)

If the image you want isn't on your computer, save it to your computer first.

Now it's time to upload the header image:

1. Choose the new image file from your computer.
2. The upload button will appear.
3. Click the upload button.
4. The upload button will disappear and uploading will appear. When the image is done uploading, that will be replaced with saved and the image will appear.
5. Reload the page to see the new logo!

All done!

To restore the default reddit header image:

1. go back to community settings> look and feel box
2. click the restore default header button below the header image.
3. The button and picture will be replaced with deleted.

WARNING: this permanently deletes your old header image. you have to upload it again to get it back.

If you don't have an image already, try asking in /r/redditlogos for someone to draw you one.

Check out adremeaux's 7-step user flair tutorial over in /r/csshelp. You can also read it in screenshot tutorial form!

For simple text flair setup, check out my example.

This is a new creation of mine, the sticky dropdown menu.

Here is a picture of it in action.

This is created using lists. The CSS I use assumes that your menu markdown will be the very first thing in your sidebar.

Here is the markdown for a menu with two dropdown lists.

>Menu

>* List 2 Header

* List 2 item 1
* List 2 item 2
* List 2 item 3

>#

>* List 1 Header

* List 1 item 1
* List 1 item 2
* List 1 item 3

A few notes:

The lists are seperated using a "#" This is to prevent reddit thinking it's one big list.

The menus are stacked last to first, as we're using "float" to place them in a line.

Here is the CSS

/*sticky menu bar*/

/*moves links down to make space*/
div.content {
margin-top: 80px;
}
/*hack to enable positioning of child elements*/
.titlebox form {
position: static
}
/*turns top quote in sidebar into menu container*/
.titlebox blockquote:first-child {
border-left: none;
position: absolute;
z-index: 10;
top: 70px;
left: 40px
}
/*turns first paragraph into menu title*/
.titlebox blockquote:first-child p:first-child {
margin-top: 0px;
padding: 5px;
float: left;
font-size: 12pt;
background:#eff7ff;
border: 1px solid #cee3f8;
font-weight:bold;
color:#555;
cursor:default;
}
/*turns the lists into menus*/
.titlebox blockquote ul {
float: right;
padding: 1px;
background: #eff7ff;
border: 1px solid #cee3f8;
margin:0px;
}
/*hide and styles lists*/
.titlebox blockquote ul li {
display: none;
padding:2px;
text-align:center;
}
/*makes whole list item selectable*/
.titlebox blockquote li a {
display:block;
}
/*shows menu on hover*/
.titlebox blockquote ul li:first-child, .titlebox blockquote ul:hover li {
display: block
}
/*turns top list item into section header*/
.titlebox blockquote li:first-child {
font-size: 12pt;
padding: 4px;
cursor:default;
}
/*styling menu items*/
.titlebox blockquote:first-child ul li:hover {
background:#ffffff;
}
.titlebox blockquote li a:hover {
color:orangered;
}
/*custom size for menu sections*/
.titlebox blockquote ul:nth-of-type(1) {width:100px;}
.titlebox blockquote ul:nth-of-type(2) {width:100px;}

The values in purple are styling only. You can change these to suit your subreddit's theme.

The values in blue are for the main positioning of the menu bar. You may need to change these if your header is not default.

The values in red set the width of the dropdown menus. You should alter these to fit the width of the contents you add. If you have more than two dropdowns, you will need to create more of these.

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

Prefix all tutorials with [Tutorial]
After you create a tutorial, add it to the directory in the sidebar.
Screenshots and CSS comments are highly recommended.

H1 and H2 posts have the following styles

#This is an H1 tag

##This is an H2 tag

tutorial background is created with a single blockquote:

This is instructions in the tutorial

This is a second paragraph, which I created using a # as a seperator

Code is created with a double blockquote.

Syntax Highlighting is available using the following code:

[](#re)`this is red text`
[](#gr)`this is green text`
[](#bl)`this is blue text`
[](#pu)`this is purple text`
[](#lg)`this is light green text`

So, this code: >> [](#gr)`div`.side {[](#bl)`border-radius`:[](#re)`5px`;}

creates this:

div.side {border-radius:5px;}

Replacing 'readers' with your choice of words

Making the original text not display

div``.titlebox span``.word {display:none; }

Adding text of your own choice

div.titlebox span.number:after {content:" Your Text Here.";}

Note: it is important not to forget the space in front of the text, lest you wish your number to be continued into the text.

Completed Code

div.titlebox span.word {display:none; }

div.titlebox span.number:after {content:" Your Text Here.";}

In this tutorial I will show you some of the most common ways to add images to your subreddit.

#Contents

1. Adding an image link
2. Adding an non-linked image

Before we start, these tutorials assume you know that you upload images to your subreddit on the /about/stylesheet page. The upload form looks like this.

##1. Adding an image link

As an example, this code will add the twitter logo to a the link of a twitter account.

You can adapt this code for any image link.

Upload this picture to your stylesheet and call it "twitter".

In the sidebar you will need to create the link to your twitter account. Because you are adding the image later via CSS, you will not need any link text.

[](http://twitter.com/BritishTVreddit)

In the stylesheet you will need this CSS:

/*Twitter Feed Graphic*/

.side a[href="http://twitter.com/BritishTVreddit"]:after {
width: 68px;
height: 16px;
content: "";
background-image: url(%%twitter%%);
display: inline-block;
position:relative;
}

The blue values are the only bits you will need to change if using this to create a different image.

This is how it will look.

##2. Adding a non-linked image

This code will enable you to add a non-linked image to your sidebar or comments. This is how subreddits add rage-faces.

In this example, we will show you how to add a star. Upload this image to your stylesheet and call it "star".

You will need to create an anchor link wherever you want the image to appear:

[](#star)

Add this code to your stylesheet:

/*Star Image*/

a[href$="star"] {
width:16px;
height:16px;
content:"";
background-image:url(%%star%%);
position:relative;
display:inline-block;
cursor:default;
}

The blue text shows the values which would need editing for a different image.

Your star is now created.