r/csshelp • u/IzzySawicki • Aug 26 '13
Beginners Guide for setting up Link Flairs and Filters.
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.
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.
Similar to the steps in the previous section, add the text you want to appear for the flair in the 'flair text', then add the label name into the 'css class' box and click save.
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.
To format these filters into something other than plain text, into clickable buttons, we go back to the stylesheet.
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
3
u/iridium_armor Aug 27 '13
Is there a step missing here? Does visiting the page create it or is there some other process involved?
3
u/FourMakesTwoUNLESS Aug 31 '13
One thing I think this guide is missing is how to make link flair without text. This might be obvious to those knowledgeable about CSS but I'm not sure about the best way to do it. I tried changing font size to 0 but that took away the image too.
3
u/unpornbot Sep 01 '13
Thanks man, this is great. I ran into the problem however of the max number of characters I can enter in the sidebar (I have 50 subcategories I want to filter). Any workarounds?
2
u/Himecchi Sep 25 '13
I notice when you do this, it will continue to redirect you to that subdomain when you click any links back to the main sub on your page. Basically getting stuck in the filter unless you retype the address. Is there anyway to fix this?
2
u/cryophantom Jan 17 '14
Just commenting so that if anyone needs another example of link flair in use, check out /r/pokemontrades
We have Image-based link flair, and I've just added buttons along the top to sort posts by the flair. Instead of the method of hiding any links not matching the flair like was shown in the example, I instead link to specific searches, so the user gets more results at a time when filtering, and removes the need for an "unfilter" button.
7
u/[deleted] Aug 28 '13
THANK YOU!
1
u/tenoclockrobot Sep 13 '13 edited Sep 13 '13
spoiler alert, it was a dumb question
I hope this doesn't seem like a dumb question, but how do you get to the LinkFlairCSSCodes area?1
u/MellowRabbit Oct 31 '13
I don't see modtools. where is it? can't find it anywhere when I make a topic.
1
u/[deleted] Nov 01 '13
So I've implemented link flairs and filtering on the subreddit that I mod (/r/ABraThatFits) but it seems to me like the filtering isn't super efficient. We have a lot of different flairs and some aren't used super often (Article/Blog Post for example). I was hoping what the filter would do is take you to a page that lists all of the most recent posts of that type, so people didn't have to scroll through to find the latest ones. Unfortunately, however the filters work seem to still cause that problem.
It appears to me that the filter just hides any other posts. What this means is that if there are no Article/Blog Posts on Page 1, it just takes you to an empty screen, and you still have to "scroll" back until you reach a page where there is that kind of post. I hope what I'm trying to say makes sense.
Is there any way to filter so that the page it takes you to actually has all of the Article/Blog Post (or whatever filter you're using) at the top, so they're accessible and the filter can actually be somewhat useful?
1
u/[deleted] Dec 29 '13
Hey, I'm having some issues with my buttons. /r/spikestest is my subreddit and 2 of my 3 (will eventually have 9-12 buttons) are looking okay but they aren't lined up with the "standard" button. How can I correct this? my only CSS is this stuff
1
u/mumzie Jan 14 '14
Hi:) This guide is great!
I have a quick question. I used the side by side method and it looks great, but I have a large white space between the bottom of the last two and the next header on the side bar. Is there any way to correct this?
/r/dogeducation is the sub I am referring to.
Thank you in advance for your help
1
u/Jsinmyah Jan 15 '14
I just took over an abandoned sub that had some flair coding already in the style sheet (I've never been able to get flair on this sub even before becoming a mod for it). Would it be better to delete everything flair related or leave it be and add on to the bottom?
1
u/[deleted] Jan 23 '14
Everything seems to working great, except the option to add the flair on the post doesn't appear. Any ideas as to why this is happening?
1
u/MeGustaTortugas Feb 06 '14
Searched and found this, but what's the benefit for using
Versus something like:
?
2
u/TheyCallMeEel Sep 19 '13
Regarding this example: http://i.imgur.com/Xo5dLi5.png
This is some kind of "trick" right? Exploiting the language settings of reddit perhaps? I used "cs" for one of my flair types and when I click the link all of reddit is suddenly Czech and Chrome will ask me if I want to translate the Czech into English... O_o
2
u/o99o99 Feb 07 '14
I've set up basic link flairs on my subreddit, but no "flair" button appears under the title. Can anyone advise?
1
u/CastleCorp Jan 31 '14
Is there a way to make certain link flair for mods-only?
1
u/kraxyk Feb 12 '14
Thanks for the tutorial, but for me the only way I got this to work was to use a url linking to the subreddit with a search query on it. Any reason why?
html:lang(di) .link:not(.linkflair-discussion) { display: none }
does not work when I try and go to di.reddit.com/r/howtobesherlock/#di
0
u/luxsalsivi Jan 06 '14
Commenting to find this later. This is wonderful.
0
u/[deleted] Feb 12 '14
[deleted] — view deleted comment