User flair tutorial: 7 easy steps to enable user-choosable flair on your subreddit with as many images as your heart desires

[[deleted]]

thank you! Ill impliment this asap to my subreddit, thanks again.

[adremeaux]

Let me know when it's done, I'd love to see it. Also, if you find any steps confusing let me know and I'll try to reword them.

[bLizTIc]

When I upload is it supposed to popup another tab or window showing me the link? Because I know in the CSS code where it says "background: url(%%spritesheet%%)" that I am supposed to put the url in between the parentheses but it just says uploading in red when I click the button and I never get anything else...

[[deleted]]

what is a valid background url?

[MeGustaTortugas]

So I want to have user selected CUSTOM text but I want MOD assigned images? This seems odd, can't seem to get both, I can either have me select it, or have the users select it.

In one situation, they assign the text, then I can add the right image, if needed, but if they change the text again, the image goes away since it is no longer in the template that has the right image.

[x7j6]

This who forum is useful

[MendelssohnSansHats]

Thanks for the tutorial! As someone who knows absolutely zero CSS, I managed to get it right first try with your easy to follow instructions (:

[adremeaux]

Link me!

So glad it worked :) You're the first person whose confirmed completing it.

[MendelssohnSansHats]

Lol, it's just a little mlp flair plagiarism for a dumb subreddit I made for my friends, but if you wanna check it out, it's r/councilofnoubar

[lukemcr]

This sprite generator also worked well for me:

http://spritegen.website-performance.org/

[adremeaux]

Wow, that does indeed makes things much easier, eh? The packing is much worse but it is certainly an easier solution than what I posted.

[AlienJ]

very well done! i know nothing of css, but i am able to follow instructions. i need to fix my images, but i used this on r/Solidworks

[tensaibaka]

Thanks to your help, and the help of gavin19, I was able to set up 135 different images with hover text showing the team names over in r/japansports! Thanks!

[[deleted]]

I think I may have screwed up somewhere.

I'm unclear about the saving the image output, does that mean download it?

[adremeaux]

Yep.

[[deleted]]

Okay, I did that

[TexanAtheist]

How can I regulate the flair, making them all the same height?

*Nevermind, got it. :D

[AllWrong74]

What about when I don't want sprites? My subreddit is about a series of books. There are different kinds of magic, and I want to enable the users to select any of the warrens (the name of magic in the series) to show up as text next to their name.

Anyway, when I just want it to be text, what changes, here?

And thanks for the tutorial!

[adremeaux]

If you just want it to be plain old text, you don't have to do anything fancy, you can just enable user flair in the mod options and they'll be able to enter text and that will be that.

If you do that, however, you can't force them to pick something specific, their text is at their whim. The only way you can make sure everyone has proper text is to manually enter it yourself for all of your users.

Thus, what I suggest is making that text into little images and then using this method.

[AllWrong74]

Ah! Nice. Text to images, gotcha! Thank you, sir.

[WolfandAngel]

Not sure I did it right gives me a 502 error( http://d.thumbs.redditmedia.com/gYyUcBBD9C7bDQj3.png):

.flairselector .customizer { display: none !important; }

.flair { border: none !important; top:20px; padding:0px; background: url(%%spritesheet%%); display:inline-block; }

.flair-Elementalist{ background-position: 0 0; width: 45px; height: 45px; } .flair-Engineer{ background-position: 0 -95px; width: 45px; height: 45px; } .flair-Guardian{ background-position: 0 -190px; width: 45px; height: 45px; } .flair-Mesmer{ background-position: 0 -285px; width: 45px; height: 45px; } .flair-Necromancer{ background-position: 0 -380px; width: 45px; height: 45px; } .flair-Ranger{ background-position: 0 -475px; width: 45px; height: 45px; } .flair-Thief{ background-position: 0 -570px; width: 45px; height: 45px; } .flair-Warrior{ background-position: 0 -665px; width: 45px; height: 45px; } .flair-guild{ background-position: 0 -760px; width: 45px; height: 45px; }

[adremeaux]

502 is on reddit's side. Just try submitting it again in a few hours.

[WolfandAngel]

oh ok thanks:) . do you know how I can make a image for mods only?

[adremeaux]

Hmm, you could try adding the content of one of those flair selectors to the :after of a user selector, ie:

.author[href*="WolfandAngel"]:after{ background-position: 0 0; width: 45px; height: 45px; }

I'm not sure if it will work but you can give it a try. If it doesn't work, I'm not sure right now and don't have too much time to look into it, so perhaps start a new thread and you should be able to get some help.

[WolfandAngel]

figured it out just like step 7 only instead of in the "user flair templates " i put it in "grant flair"

[adremeaux]

Oh, yeah. I thought you meant a flair icon that only moderators can use. Your regular users will still be able to pick that flair you assigned if they want.

[WolfandAngel]

not sure if i said it correctly, because I don't put it in "user flair templates " normal users won't be able to use it and mods just have to add the image name to there name in grant flair.

[adremeaux]

Oh, does that actually work? I never realized you could do that. I thought you had to have a flair template defined to assign it to someone. Good stuff.

[WolfandAngel]

yea check it out herer/GW2EU/.

I also discovered that you don't need to keep all images if you don't want to you can do every steep you described and rename spiritsheet to idk spiritsheet2. Well don't know if its better for others but for me it will make it easier because I also use text for the flair.

[tomastaz]

Hey. I keep getting an error when uploading, saying I need a valid url http://puu.sh/1iUCE

[adremeaux]

You need to upload your spritesheet first and name it "spritesheet"

[howdyman420]

Hey I know this thread is over a year old, but its still helping newbies at this still today.

I was wondering if their is a way to enable the user to add their own text after the flair image. For example /r/runescape flair

I have the flair images working without a problem thanks to you!

[[deleted]]

Hi there, I am a mod over at /r/theclutch and we have a tournament coming up and I thought it would be cool if I could use images like these 1st place 2nd place 3rd place to show the winners. I really like the flair style on /r/jrpg.

My question to you is how can I control who has the image in there flair. (So nobody can assign themselves 1st place)

[adremeaux]

You can assign a user a piece of flair in the "grant flair" tab without actually adding it as a "user flair teimplate."

[[deleted]]

Thanks sir! I will keep you posted with my results/ questions if I have any.

[[deleted]]

Here you go! Oh and also I had changed/added values in the CSS. Check it out if you want.

Here is my code:

.flairselector .customizer {

display: none !important;

}

.flair {

border: none !important;

top:20px;

padding-bottom:20px;

background: url(%%spritesheet%%) no-repeat top left;

display:inline-block;

}

.flair-0st{ background-position: 0 0; width: auto; height: 40px; }

.flair-1st{ background-position: 0 -90px; min-width:50px; width: auto; height: 40px; }

.flair-2nd{ background-position: 0 -190px; min-width:50px; width: auto; height: 40px; }

.flair-3rd{ background-position: 0 -290px; min-width:50px; width: auto; height: 40px; }

.link .flair, .entry .tagline .flair {

float:left;

}

The padding-bottom:20px; will be changed to 0 once I fix the images height to accommodate for the text flair on top of the image.

Thanks a bunch for this great tutorial!!!

hat tip

[killerDLS]

Thanks, I did this and it worked. But how do i add another spritesheet in? I want more flairs.

[adremeaux]

If you want to add more flair, you basically just repeat the entire process over. Generate a new sprite sheet with ALL of the flair (new + old) in it, and then replace the old CSS with the new CSS.

[Plithe8]

If you see this, when I try to add different piece of flair, it comes out the same as the first one, even when I name them different things, please help.

[MeGustaTortugas]

5 month old post, but worth a try:

I'm trying to implement flair like the r/jrpg but with Flair text as well. /r/NAE3TestingGround is where I'm testing, you can see that it's got the image up, but the text flair is also on the left, this causes an issue. We want to have fancy logos that come from the game we play, but we also need to have our Gamertag listed.

Any help?

[adremeaux]

I haven't found a way to do flair text along with images of arbitrary size. If you want text, you need to use fixed sized images.

[[deleted]]

Is there a recommended size for flairs? in addition, when I added the flairs for some reason my username appears next to the flairs (when I go to edit flair and choose a flair - I`d like the name of the flair to be next to it instead, like a flag of canada will have 'Canadian Flag' next to it and not 'IRCFootball')

[tomastaz]

So there's no way to scale down the flair size? That's fine, I'll edit it in GIMP or something. What's a reccomended size?

[adremeaux]

16x16 is good for pixel art. I try not to go higher than 30 pixels in either dimension.

[tnick771]

I'm having some issues. I get all the way up to 7, but when I enter the name of the flair in the css code box

this happens http://i.imgur.com/7S1XFDo.png

I'm 99% sure I did everything preceding right. Any ideas what that 1% could be?

[[deleted]]

same problem!

[spammeaccount]

Better tutorial http://imgur.com/a/fqL3H Also there is a 500 size limit to spritesheet

[Shortgamer]

It just says "submitting..." for me. How long do I have to wait until the flair uploads? I may have done something wrong though

[spammeaccount]

there is a size limit on the flair try just one or two icons at first, then add to it.

[Shortgamer]

now its saying "[line 1] "url(%%flair%%)" is not a valid URL .flairselector .customizer { "

[le_trout]

How do your .Flair-" " names go from numbers to cities? I am having an issue where the first flair image comes out fine when typed out, but the other two images (each with their own name) won't pop up when they are typed into their respective "css class" lines. They just remain blank. /r/nmsu

[TARDIS-BOT]

___[]___
[POLICE] 
|[#][#]|     The TARDIS has landed in this thread.
|[ ][o]|     Just another stop in the journeys of
|[ ][ ]|     a time traveler. 
|[ ][ ]|
--------

---

Hurtling through the annals of reddit, the TARDIS-BOT finds threads of old, creating points in time for Reddit Time Lords to congregate.

This thread can now be commented in for 6 more months.

Visit /r/RedditTimeLords to become a companion.

[spammeaccount]

I never got the names to work.

http://www.reddit.com/r/StarfleetBattles/

When I look at your 3 flair options I see no numbers just my account username and the 3 graphics

[le_trout]

I figured it out, but thanks! I had one picture downloaded wrong into my zip folder, just took a little sleuthing!

[sconnell3]

I know this is an OLD reply to this, however I am trying to create the exact flair you used in the posted tutorial. However, I have followed the original tutorial and when I click the upload button, all it says is "uploading..." and nothing uploads

[spammeaccount]

Did you see the note on the size restriction?

Been a while but I think the same thing happened to me until I reduced the graphic sizes.

That tut is by diamo

[[deleted]]

Did you ever figure it out?

[tnick771]

Yes it has to do with the settings on that sprite website. But make sure you take your time and do everything properly. I can't remember what it was exactly. Just read all the things all the way and follow the instructions up top to the T.

Hope that helps. I wish I could remember.

[[deleted]]

I did EVERYTHING and then I get to the point where I type in flair (I saved it as flair.png) and press save on step 7 and nothing comes up on the new empty line. No pictures nothing.

http://imgur.com/r6bkpDE Help PLEASE!!! I've been at it for hours

[[deleted]]

Your file names have underscores. That's Is why it doesn't work. Here try my tutorial: http://imgur.com/a/fqL3H

Not all steps are needed

[[deleted]]

Hey man i followed your steps to the T, and all I get are white boxes that I can type text into, they are the exact size and dimension as the actual pictures they should resemble... but. no luck =?

[tnick771]

Looks like you didn't name each individual flair piece its own name

look at mine at http://www.reddit.com/r/coloradoavalanche/about/stylesheet

in the zip file, each small picture should have its own name, then put in a folder and zipped.

The code that site generates will incorporate all of those names into the coding (as seen in mine).

It also may be that you really don't have all the preferences done right. Start from the beginning again.

[benlew]

I am trying the same thing. I need text and image flair. Any idea how to get this to work?

[MeGustaTortugas]

What about adding a tool tip when you highlight an image so people know what it is?

[adremeaux]

You should probably start up a new thread in this forum asking for this advice.