Membership levels star icons replaced with pure css?

[spiros]

Membership levels star icons replaced with pure css?

Star icons for membership levels [red, blue, yellow green] (in user member level badges) appear in multiple places, mainly in message view.
Currently they are selectable at Administration Center »Membergroups »Edit Membergroups via setting an icon path and name. How could they be converted to pure css squares?

Star image filename: you can use $language for the language of the user {theme URL}/images/star.gif

[Arantor]

You'd have to rewrite all the places that this is generated (and it's more than you'd think) so that they don't create an output of images since the only thing the DB keeps is the image name to use and how many times to use it.

Personally I'm not quite sure what the big drive would be, you could replace the images to be whatever you wanted image-wise, the images are normally cached on the user's side anyway so no performance benefit there, and the markup per page change would be... a rounding error to the total content being served.

One of the things people forget in the push to use Font Awesome is that, actually, once you cover the cost of sending the font, that's a lot of images you've just had to offset the cost for, and FA is pretty generic and lacking personality compared to what a themer can do with it.

[Antechinus]

It's Awesome, so it must be good.

[live627]

or maybe use SVG icons, since i think the biggest appeal is vector... there may be a math joke somewhere...

The regular raster bitmaps are always fuzzy for me because I use 1.2x scaling.

You'd have to rewrite all the places that this is generated (and it's more than you'd think) so that they don't create an output of images since the only thing the DB keeps is the image name to use and how many times to use it.

I spy with my very own eyes a lonely buffer hook.

[Arantor]

The lonely buffer hook, not so lonely since 2.0.16 would indeed be performing a 'rewrite [of] all the places that this is generated'. Implementation was intentionally left as an exercise to the reader, with the hopes of all places emitted utilising the same code across the display, PM, groups pages and admin pages.

[Antechinus]

Just noticed that Spiros wasn't actually suggesting FA here. He was talking about pure CSS squares, which would be low overhead (and potentially can include HTML stars and whatever other symbols instead of just squares).

[Antechinus]

The regular raster bitmaps are always fuzzy for me because I use 1.2x scaling.

Code Select Expand

img{transform: scale(.833);}

[Arantor]

That's not what the OP is asking about, he wants to change the badge images themselves to CSS.

[Antechinus]

It's not a bad lurk though. Doesn't really need the extra span, since you could set the background colour on the li itself.

Code Select Expand

<li class="membergroup"', !empty($message['member']['group_color']) ? ' style="background:'. $message['member']['group_color'].'"':'', '>

Or just assign a supplementary class, and set colours in the CSS. Similar tricks could be used to change the member stars, which I think was the point.