Category with first letter view


(Tomo Vukasović) #1

We have a forum with lots of subcategories. It is hard to memorize all the category colors at all times.

I was thinking of adding the first letter of category before the subcategory name. Something like this where E stands for Extensibility:


(Kane York) #2

I believe you can do this with CSS. The parent category name is in the HTML, but hidden.


(Tomo Vukasović) #3

I didn’t have time to play with it, but it is great if its just CSS.


(Helmi) #4

That sounds interesting so i played around a bit. Here’s a possible approach (only played in chrom dev tools so far):

I disabled the display:none and changed it to visibility: hidden instead. also set the display to display: inline-block. That is because the following subselector needs a block level element:

That looks like it’s working. You probably need to trim the width a bit more or set different other stuff according to what you need but here’s what it looks like in your Forums, @Webinsane


(Tomo Vukasović) #5

Did you tested live? I managed to show full category name, but making visible just first letter did not work as expected. Maybe SASS is conflicting…not sure.


(Helmi) #6

No, i only played around with it in the Google Chrome Dev Tool, sorry.