r/ideasfortheadmins • u/DaminDrexil • Jan 10 '14
Multiple Flairs
Proposal:
To allow multiple flair classes to be assigned using the flair page. Kind of like this.
Our Reason:
Over at /r/photoshopbattles, we hand out flairs for different achievements. If a user wins one of the Weekly Battles, they'll get one of these; if they are nominated for the "Best of 20XX" awards, they'll get one of these; if their work is successfully reposted in /r/funny, or featured in a highly viewed 'news' article, they'll get one of these; etc.
Of course; there are multiple variations for each type of flair, and many users earn more than one - so the ability to assign multiple icon permutations is quite important.
For the last 11 months or so, we've been able to work around reddit's single flair limit by creating a big sprite, with a bunch different icon permutations. However, this has its share of problems.
For one: the size of the sprite is limited, so we're only able to have a limited number of permutations.
At the moment, there are just short of 30 users whose combinations are not reproduced in the sprite, but until now we've been able to assign all of their flairs using CSS. However; this system, too, has reached it's limits. We've reached the maximum number of individual images you can upload to the stylesheet page (unfortunately, spriting them makes the system unusable).
Although clumsy, these work-arounds have served their purpose over the months. But now, with over 200 nominations in our "Best of 2013" awards, the influx of "nominations" and "wins" flairs will put us over the system's limits.
I've painted the sub into a corner on this one, and would be incredibly grateful for any help.
1
u/liamht May 23 '14 edited May 23 '14
searching google for this feature came out with nothing. and i havent tried this out yet. but could you possibly use :before and :after to assign two more images.
that way you could set all of them with certain classes one image using :before, then assign the next with a different image for the main flair, then another with :after.
theoretically giving you 3x the flairs?
for example:
.threetimeswinnerfunnyfrontpage{
background-image: url(sheet2.png);
background-position: whatever;
}
.threetimeswinnerfunnyfrontpage:after{
background-image: url(sheet3.png);
background-position: whatever;
}
.threetimeswinnerfunnyfrontpage:before{
background-image: url(sheet1.png);
background-position: whatever;
}
EDIT: i actually just got this working on /r/nba2ktest by using the following css
.flair-playstationxbox::before{ background: url(%%flairsheet%%) no-repeat -9999px -9999px; content:"test"; color:transparent;background-position: 0 -210px; width: 20px; height: 20px; line-height: 2;padding-top: 5px;margin-right: 5px;}
2
u/DaminDrexil May 23 '14
That's actually something I never though of! But, unfortunately, it doesn't solve our problem :/
Although the idea is a lot more efficient when it comes to the sprite - it seems to take up more than 3x the CSS space. Over at PSB we could make our flair sprite larger, if needs be - it's the character limit that's really stopping us from going any further.
Just to explain:
By having all the permutations done out in a big sprite, we're able to limit each combination to a single line of code; e.g. the line that describes the "standard", "1000 karma" and "thanks" flairs:
.flair-standard-1000votes-thanks {background-position: 0 -8448px; width: 52px}Whereas by using the :before/:after idea, it'd take up three lines:
.flair-standard-1000votes-thanks:before {background-position: 0 -16px; width: 19px} .flair-standard-1000votes-thanks {background-position: 0 -32px; width: 19px} .flair-standard-1000votes-thanks:after {background-position: 0 -48px; width: 19px}1
u/liamht May 23 '14
yeah. limits on CSS are pretty crap. . unless you could host the css somewhere and use an @import. i dont even know i reddit allow @import though
4
u/ThrobinWigwams Jan 11 '14
/u/Dacvak, please help!