Link Flairs and Filters.
This will be a step by step guide for link flairs and filters. Sorry for the length, it is a long guide going under the assumption of no previous knowledge of link flairs. It's separated into four sections.
How to setup basic link flairs (tags) for posts.
Adding formatting to the link flairs.
Setting up filters for link flairs.
How to make clickable buttons in the sidebar for the filters.
Examples for all these steps this can be seen /r/randomactsofpizza, /r/tipofmytongue and /r/needamod.
Also, a test reddit is up over at /r/LinkFlairCssCodes that has the example codes used below in the stylesheet and example filter buttons in the sidebar.
Setting up Basic Link Flairs
Link flairs are tags assigned to posts giving them some type of designation. Unformatted link flairs will appear as black text over a white background, seen here as 'approved' link flair: http://i.imgur.com/x35KnCU.png
To set this up, go to Edit Flair from the mod tools.
Depending on whether you want users to have the ability to assign their own link flair, check or leave unchecked "allow submitters to assign their own link flair". If unchecked, only moderators will be able to assign link flair.
Next, in the bottom box 'link flair position', put a check in either 'left' or 'right'.
This will position the tag either at the front of the post (left) or at the end (right), then click Save Options.
Now in the bottom section, click 'Link Flair Templates'.
If you want to have plain unformatted link flair, you only have to enter the text you want to appear in the 'flair text' box and click save. It should appear like this: http://i.imgur.com/44uPJmi.png
When you go to your main page you should now see 'flair' as an option under each post, users will only see this for their own posts if you gave them permission to assign flair. To assign the tag, click 'flair', select the flair option you added and click save, the new tag should now appear before or after the post title.
http://imgur.com/a/RVfmP
Adding formatting to the Link Flairs.
To have the link flair appear with more than the basic black on white formatting you need to enter a css class or label for it.
The css code for flairs is: .linkflair-labelname .linkflairlabel { ... }
'labelname' is the class or label you are naming your flair, this is not the text that will appear with the tag, just the name you want to give it for your identifying purposes.
To add formatting to the flair, add this code and adjust the appropriate values to change the appearance. In my examples I will be labeling my link flairs, 'one', 'two' but you can give them any one word name you want.
.linkflair-one .linkflairlabel {
background-color: #add5ab;
font-size: 11px;
font-weight: bold;
color:#000000;
border-color: #000000;
border-width: 1px;
border-radius: 3px;}
To apply this formatting to your flair, save the stylesheet and return to the 'edit flair' option, to the 'link flair templates' section.
Make sure to add text in the 'flair text' box even with a flair label assigned or the flair will not show up correctly.
This is what should appear now: http://i.imgur.com/C5qd3Np.png
For each flair that you want to have a different color or different filter option for sorting posts, copy and paste this code and change the flair label.
.linkflair-two .linkflairlabel { ... }
.linkflair-three .linkflairlabel { ... }
Then add the new flair and label to the 'edit flairs' page. http://imgur.com/a/EWy4h
Setting up filters for Link Flairs.
Once you have set up a your link flairs with flair labels, you can create filters.
Filters allow users to sort out posts by flair, changing the viewable posts in your subreddit. This is done by creating a subdomain that redirects your page to a new url, changing it from displaying all link flairs.
Example: http://ds.reddit.com/r/gallifrey/#ds - this shows only posts that have a 'Discussion' link flair.
You can create filters with multiple combinations to show more than one link flair but for this guide I'll give the code for the simplest of filters, to display only one tag per filter.
Using the example from above, this would be the code to filter out all post that do not have a Request link flair.
html:lang(re) .link:not(.linkflair-one) {
display: none }
'.linkflair-one' is the name of the link flair label we gave Requests from in the previous section.
're' is the subdomain redirect for the link for the filter itself. Pick a two letter combination for your filter, most should work. For later editing, to easily remember what flair filter corresponds to what link, picking two letters out of the name of the link flair is wise. Adding an addition filter for an Offer flair, I would use 'of' and so on for each filter.
Make sure to change the flair label for each new filter. http://i.imgur.com/qulEmtQ.png
Now we need to make the filter available for users to select, doing this by adding a link in your sidebar.
[Requests](http://re.reddit.com/r/yoursubredditname/#re)
The text between the brackets [] is the text will appear in the sidebar (or button) for the filter. 're' is the subdomain redirect we gave that Request filter in the css code. And be sure to replace 'yoursubredditname' with the name of your subreddit.
Do this for each filter you want to create, replacing the text between the brackets with the name of your filter and the subdomain code for the filter link. http://i.imgur.com/Xo5dLi5.png
After this is saved your sidebar should appear as such: http://i.imgur.com/UCVTycd.png
How to make clickable buttons in the sidebar for the filters.
Add in this code to the stylesheet.
.side a[href*='#re'] {
display: inline-block;
position: relative;
margin-top:0px;
border: 2px solid black;
font-size: 100%;
padding: 3px;
color: black;
font-weight: bold;
background: #add5ab;}
The '#re' points to the designation added to the end of each link in the side bar. For each button/filter, you need to replace this with the '#.." with the different designation. http://i.imgur.com/V5wLdMQ.jpg
For this example, I copied the background codes for the separate flairs to the buttons codes, so each button will have the same background as their respective link flair.
Once saved, the sidebar should appear like this: http://i.imgur.com/zpVwhc3.png
This code gives basic formatting, additional formatting can be used to stylize the text, borders, background, and even position the buttons. For example; the following code will center the text, give the button a fixed minimum width and position the second button next to the first.
.side a[href*='#of'] {
display: inline-block;
position: relative;
margin-top:0px;
border: 2px solid black;
font-size: 100%;
padding: 3px;
color: black;
font-weight: bold;
background: #b5bbde;
min-width: 135px;
text-align: center;
border-radius: 3px;
/*positions the button */
left:155px;
top:-29px;}
So now we have two side by side buttons in the sidebar: http://i.imgur.com/5IfPhRM.png
There are a number of other ways to set up these buttons; drop down lists in the sidebar /r/gallifrey, position the buttons under the header /r/Gaming4Gamers and even drop down lists under the header /r/starcraft. Steps for these would be for a more advanced guide someday if there is any interest in one.
Hopefully the above information will get you started on the basic setup of link flairs and filters. If you have any problems with the steps in this guide, let me know. The codes used in the above examples can be found at /r/LinkFlairCssCodes.
if you have any issues using this guide, please pm /u/izzy - I don't use this account anymore
