An Introduction to Reddit Flair

What’s a Flair?

Reddit Flair

Flair are tags & icons that you can sometimes see next to a Redditor’s name or link post title in subreddits that support it. Besides providing a cool way to show a little about yourself through them, they also serve a real purpose by allowing others to filter desired/undesired content from their feeds. This guide consolidates all someone needs to know about getting started with adding Reddit flair to their own subreddit.

Cool! How Hard Can It Be To Setup?

Well, when I first approached a subreddit’s mods and asked them if they would like me to setup flair, I presumed (incorrectly) that setting up flair would be trivial. I figured that there was a little CSS involved, that I’d have to upload the images to some place, and that there would be plenty of tutorials out there for me to follow and improvise upon. I was wrong on all counts. It’s actually quite an involved process to not only implement flair, but to also maintain it efficiently.

Getting Started

  • Every community will differ in how they use flair and what they use it for, so it’s generally good idea is to start by asking your community what it is they want in the first place.
  • For communities that choose flair, it can be an important part of their unique culture.
    • In some roleplaying sub-reddits, flair can strictly dictates caste in the community.
    • In some sub-reddits that cover enormous fictional universes such as Star Wars, flair is essential for pointing out which specific elements of the universe are your favorite.
    • In some communities such as /r/science, link flair is mandatory and essential for making the “filter by category” functionality work as it does.

Here are some ways I’ve used to get the conversation started:

  1. Sticky a post asking whether or not flair would be a good idea for your community.
  2. If your community likes the idea of flair, sticky a post asking the community for insight into how they want to use flair, and the kinds of flair they would prefer.
  3. Actively engage the community in productive dialog toward establishing an draft list of flair that you initially want supported.
  4. Thank everybody that participates, let them know how much their help is appreciated, and exercise little hubris.
  5. When an initial draft list of flair is established, let everybody know that you’re going to take their feedback into the mod shop, scope out the actual work involved for the project, then provide a proposed course of action for the community to scrutinize.
  6. Keep the community up-to-date with any questions or issues involved along the way.

Scoping a Flair Project

“Scoping” is the process of really figuring out the amount of work that needs to be done on a project. As such, you can’t really begin scoping your flair project until you have an initial list of flair that the community wants supported. If you only have a general idea of what flair your community wants, you need to go back to the previous section, because if the project isn’t scoped right, you may make poor decisions when deciding the level of autonomy your community requires to maintain their flair system.

Automatic or Manual?

When it comes to setting up flair, the distinction between a small project and a large project has to do with the amount of work required to maintain it.

  • A small project is one that requires no automation because it has few flair, and infrequent updates.
  • A large project is one that requires automation because the amount of work needed to maintain it is too much for a person to commit to.

Scaling Considerations

  1. Reddit’s flair interface is exceedingly clunky and tedious to use:
    • You have to insert flair one-by-one, including typing in each CSS class name perfectly.
    • You can’t re-order flair after it’s been put in. You must input them in the correct order, or delete them all and re-input them in a new order.
  2. There’s hidden work that you don’t think of at first:
    • You have to create CSS classes and rules for each flair if you want flair to look like anything except the default text tags.
    • If you have individual images, because you need to upload your images to Reddit, then reference them in each CSS rule.
    • If you use a spritesheet, you only have to upload one image to Reddit, but you still have to reference the coordinates on the sheet in each CSS rule.

We all have limited time to spend on Reddit in general, let alone on technical tasks for a subreddit. When you get into projects that involve many flair, you begin to feel the crunch of seriously tedious work. For example, if I have 15 flair, and want to insert one more into the middle of the list, I have to delete 7 flair from the list, and input 8 again. For this reason, it’s important to note that this guide only covers a manual setup for the purpose of subject familiarization. A future guide will cover automation techniques.

Manual Project Setup

If your community only wants a few flair, you don’t expect many changes, and you also don’t need images or other fancy customizations; you may wish to save yourself the effort of setting up an automated system and just go with a manual approach to adding flair. The following sections will cover every aspect of manually managing a small flair system, so that you can become familiar with how it works, and get something to your community right away. It goes over each screen you’ll encounter, and each element on those screens. In the end, there’s a small tutorial for the basic CSS skills you’ll need to manage adding icons to your flair, as well as an invitation for you to comment below to help improve this guide for others.

Find The Edit Flair Screen

  1. On the sidebar of the subreddit you moderate, you will see a box called “Moderation Tools”.
  2. In that box, you’ll find a link called “edit flair” if you have proper permissions.

edit_flair

Enable Flair Options For Users

Screen Shot 2014-06-12 at 10.09.43 PM

  1. Enable User Flair In This Subreddit
    • When this box is unchecked, existing user flair on the subreddit will not be visible.
  2. Allow Users To Assign Their Own Flair
    • When this box is unchecked, users cannot assign their own flair, though mods can assign flair to users.
  3. Allow Submitters To Assign Their Own Link Flair
    • When this box is unchecked, users cannot assign their own flair to links they submit, though mods can assign flair to links.

Flair Position

Screen Shot 2014-06-12 at 10.22.48 PM

  1. User Flair Position
    • Use this pane to control the position of user-assigned flair.
  2. Link Flair Position
    • This pane controls the position of flair that is assigned to links submitted to the subreddit.

Grant Flair

Screen Shot 2014-06-15 at 5.22.11 PM Overview

  • The first of three tabs on the flair list pane is the “grant flair” tab.
  • Here, you can give special flair that is otherwise not available in the public list of flair.
  1. Jump To User (or Add)
    • Before you begin searching, you’ll see a complete list of all subscribers with special flair granted to them.
    • When you type in the username you want to grant the flair to and click go, you’ll see that list replaced with the users that matched the search term.
  2. Flair Text
    • When you begin typing in the flair text you want, a save button will appear to the left of the delete button.
    • Click save, and that flair will be instantly applied to that user.
  3. CSS Class
    • This is where you want to type in the CSS class associated with the flair.
    • You don’t need to put anything in here, unless you want to have flair icons or other kinds of customizations (color, bolding, italic) to your flair tags.

User Flair Templates

Screen Shot 2014-06-15 at 5.30.49 PM Overview

  • This is the tab for setting which flair are available for users.
  • The list you see is the official list of all user-assignable flair.
  • Remember that you can have different flair for users and links. This is the tab for user flair.
  1. User Can Edit?
    • Warning: If you check this box on even one flair, you will allow all users to create custom flair text whenever they want. This can be profanity, racist remarks, and the other usual mix of grief. Activate this option only if your subreddit is okay with handling this kind of potential abuse.
  2. Flair Text
    • This is the text that will show up next to a user’s name. You can replace it with an icon using CSS (which is covered in a later section).
    • When you begin typing in the flair text you want, a save button will appear to the left of the delete button. Click save, and that flair will be instantly added or changed on the list of available flair.
  3. CSS Class
    • This is where you want to type in the CSS class associated with the flair.
    • You don’t need to put anything in here, unless you want to have flair icons or other kinds of customizations (color, bolding, italic) to your flair tags.

Link Flair Template

Screen Shot 2014-06-15 at 5.47.43 PM Overview

  • This is the tab for setting which flair are available for posted links.
  • This is the official list of all link flair, which is shown to the side of a link’s title in the subreddit.
  • Remember that you can have different flair for users and links. This is the tab for link flair.
  1. User Can Edit?
    • Warning: If you check this box on even one flair, you will allow all users to create custom flair text whenever they want. This can be profanity, racist remarks, and the other usual mix of grief. Activate this option only if your subreddit is okay with handling this kind of potential abuse.
  2. Flair Text
    • This is the text that will show up next to a posted link’s title in the subreddit. You can replace it with an icon using CSS (which is covered in a later section).
    • When you begin typing in the flair text you want, a save button will appear to the left of the delete button.
    • Click save, and the flair will be instantly added or changed on the list of available flair.
  3. CSS Class
    • This is where you want to type in the CSS class associated with the flair.
    • You don’t need to put anything in here, unless you want to have flair icons or other kinds of customizations (color, bolding, italic) to your flair tags.

Customizing Flair With CSS

Overview

  • CSS stands for Cascading Style Sheet, which is a language to tell web browsers how things in it should look.
  • If you want to customize the look of flair beyond it’s default text tags, you will have to write a little bit of CSS code and upload it to Reddit.
  • Customizing flair with colors is easiest because you only need to upload some CSS code, then reference it in the flair template.
  • Customizing with image icons is only a little bit more work.

Big Gotcha

  • Reddit automatically adds “flair-” to the beginning of your css classes.
  • This means that if you type “king” into your css box as the correct class, it will be converted into .flair-king
  • This is the most common reason that people fail at implementing flair!

Finding Edit Stylesheet

  1. On the side bar, find the Moderation Tools pane.
  2. Click on “Edit Stylesheet”edit-stylesheet

Edit Stylesheet Page

Screen Shot 2014-07-26 at 11.24.01 PM

  1. Stylesheet Box
    • Here you type in all of the CSS code that you’ll then reference later in the flair template interface.
    • The next section will explain how to write some basic CSS.
  2. Reason For Revision
    • Whenever you make a change to the CSS, you must provide a reason for changing it.
    • BE THOROUGH! This is not for Reddit Admins to use, but for your fellow moderators to know what you changed, without having to ask you.
    • If somebody has to ask you what you changed, you’ve defeated the purpose of this feature.
  3. Image File Type
    • Reddit cannot auto-detect which image type you are uploading, so you’ll need to manually choose jpeg or png respectively for your image.
  4. Choose File
    • This will pop-up a dialog that lets you browse for your image to upload.
    • After you choose your file, an “upload” button will appear.
    • Click the upload button only after you’ve typed in a new image name.
  5. New Image Name
    • Here, you want to type a unique image name that consists only of letters, numbers, and the dash character ().
    • Whatever name you choose here can be used in your CSS files as a placeholder word.
      • For example, if you choose the name “spritesheet”, you can then use the following placeholder snippet in your CSS:
        • url(%%spritesheet%%)
  6. After Uploading An ImageScreen Shot 2014-07-26 at 11.40.02 PM
    • You can delete the image by clicking “delete this image”.
    • You can automatically paste the placeholder snippet into the stylesheet by clicking “paste into stylesheet”.

Basic CSS For Reddit

Overview It is far beyond the scope of this article for me to comprehensively teach CSS, but I can get you started with the basics so that you can add styling and images to your flair. Remember that there is so much more you can do with CSS, so I encourage you to study more about how it works, and how it can be used in subreddits.

CSS Classes

  • Classes are named groups of style rules that you can apply to elements (like flair) in the web browser.
  • When creating Reddit flair, you generally want to create one class per flair, but you can also create classes to make multiple flair have the same styling.

VIP Class Example (Text)

  • This class called “vip” can be applied to any flair template we want to emphasize the flair tag with red and bold text.
  • Reddit automatically adds “flair-” to the beginning of our class name, so we need to add that prefix to our class names:
  • .flair-vip {
      color: Red;
      font-weight: bold;
    }

Medieval Class Examples (Text)

  • Presume that you have a medieval-themed subreddit, and you want to implement a Feudal Flair system. Your CSS could look something like this:
  • .flair-king {
      color: Purple;
      background-color: MediumPurple;
      font-weight: bold;
    }
    
    .flair-queen {
      color: Purple;
      background-color: MediumPurple;
    }
    
    .flair-lord {
      color: RoyalBlue;
      background-color: LightSkyBlue;
      font-weight: bold;
    }
    
    .flair-knight {
      color: CornflowerBlue;
      background-color: White;
    }
    
    .flair-peasant {
      color: DimGray;
      background-color: LightGray;
    }

Medieval Class Examples (Individual Icons)

  • In this example we’re going to replace our text flair with images instead, using one image per icon.
  • First, we need to upload all of our images using the interface on the edit stylesheets page (covered in the previous section).
  • After uploading all of your images, it should look like this:Screen Shot 2014-07-27 at 12.44.27 AM
  • Now, we just add each image’s placeholder snippet to it’s corresponding background-image rule:
  • .flair {
      text-indent: -9999px;
    }
    
    .flair-king {
      background-image: url(%%king%%);
    }
    
    .flair-queen {
      background-image: url(%%queen%%);
    }
    
    .flair-lord {
      background-image: url(%%lord%%);
    }
    
    .flair-knight {
      background-image: url(%%knight%%);
    }
    
    .flair-peasant {
      background-image: url(%%peasant%%);
    }

Applying CSS Rules To Flair

  • Go to the User Flair Template Page.
  • In the CSS Class field next to each flair, type in the name of the flair, then press save.
  • Remember that Reddit adds “flair-” to the beginning of your class names automatically. You should not add the prefix yourself on this screen. If you want it to be “flair-king”, simply enter “king”.
  • In the end, you should have something that looks like this:Screen Shot 2014-07-27 at 12.46.54 AM

Spritesheets Come Later

Combining your images into a single image via a spritesheet can simplify some tasks if you have a lot of images and want to be able to update all of them at once by uploading a single image that contains all of your icons. In my opinion, by the time you have a legitimate reason to use spritesheets, you will already have an intermediate understanding of CSS and Reddit, and will not need my explanation as to how it works. In other words: stick with the individual image approach for now. You’ll know when spritesheets make sense for you.

Good Luck

In the next flair guide, I will cover open-source methods to automate all of the tasks above so that you can support virtually any number of flair, complete with icons, styling, and more. I hope this introductory guide was of some use, and encourage you to leave comments below to let me know any ways that I can improve this guide, or the next.

Advertisements

5 Comments Add yours

  1. sim_pl says:

    Hey automateallthethings, thanks for the article as it cleared up some of my questions about enabling flair. I have one remaining bug that I haven’t been able to iron out, and that is allowing users to edit the flair text next to images. I’ve checked off “user can edit” but it seems to be that some people can remove the text, some can’t. I’ve made a throw-away to test alongside my regular account, but neither can edit flair text. Any further steps to check out?

    1. Hi Simon,

      I’ve seen this where some of the users are mods, and others are not. The mods can edit the flair text, but the regular users cannot. If you can take a screenshot of your flair settings and put them up on imagur, I can try to spot exactly what’s going wrong.

  2. Jens Møller says:

    Fantastic articel, i found i really helpfull 😀

    1. Adam says:

      When I try to do this, I get text over my image instead of next to my image. What am I doing wrong?

      1. The best way to get help is to head on over to /r/csshelp and post a thorough account of what’s going on.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s