CSS override Status Macro all uppercase font

Question

I would like to use text-transform: none CSS to override the all uppercase font used in the Status Macro  (fancy lozenge that displays text in a colored box).  When I include text-transform: lowercase, the font will show lowercase but text-transform: none has no effect.  All uppercase seems hard to read.  Thanks!

Shannon S · Answer

No problem, Kathryn! I'm glad I could confirm that for you. :)

Regards,

Shannon

Kathryn Moye_vso5k6 · Answer

Thanks for the reply!  At least I'm not crazy. :)

Shannon S · Answer

Hi Kathryn,

I've tested this as well, and the only way you can change the text is to use 'lowercase'. It appears 'none', 'capitalize', and 'inherit' do not work with this particular macro do to the way the capitalization is being set.

Here is the code I ended up using myself which is likely the same one you determined to work:

.status-macro.aui-lozenge {
    text-transform: lowercase;
}

You can have a look at CONFSERVER-28822 for explanation on why we went with the capitalized version of the macro.

Let us know if you have any questions.

Regards,

Shannon