Custom chat CSS - What would you like to see?

We plan to soon release custom chat CSS. This will be a paid upgrade -- more details on that in the future.

I am going through the chat & adding various classes to elements in the chat. For instance, I will allow you to type:

.msgText-owner{font-size:22px;}

to make all messages by owners appear at 22 pixels in height, instead of the chat's default 17.

Furthermore, you could type:

.msgText-3{color:pink;}

This will make user ID 3 (Spell) have pink font, regardless of his rank. So right now I have rank-specific classes, & user-specific classes, which owners will be able to use as they see fit.

So, for our CSS wizards: What sort of ideas do you have, that you'd like to see me make possible with custom CSS? Maybe links submitted by a specific ID appear different? Or suppress emojis by specific ranks/IDs? Let me know so I'll make sure to add the relevant class names.

Thanks!

I spoke with someone directly about the idea, and they suggested I add a data attribute for the first word sent in a message, so I've done that:

.msgText-owner[data-firstword="Remember:"]{font-size:45px;}

This will allow owners to say Remember: Check out example.com every hour!!! and it will appear 45-pixels tall. All other owner messages are unaffected, and non-Owners won't be able to use it.

Anyone else have any ideas similar to that?

Could you set a list of certain keywords and whenever those words are used in the chat, they'll appear with a unique style? (Font size and/or color and/or markdown). Perhaps you could combine this with the (existing) bad words feature and make it so certain words don't appear at all? For example, if "badword" is a bad word, could you do something to the effect of
.msgText[data-is="badword"]{display:none;}
to hide them? (Not sure what the actual CSS would look like)

Maybe you could also do something similar with links, making certain custom links different colors, or displaying in bold text?

At the moment they could use .badWord{display:none;} to hide badwords (only to those who've chosen to hide them). I'll add a data attribute so they can use .badWord[data-word="deez"]{display;none;} if they just want to suppress "deez".

I can also add a data attribute for links, so they can customize specific links/domains as they see fit. (Both for our "pre-set custom links", as well as http links sent by users)

Regarding "font color" tags, those aren't really possible with CSS alone. At the moment, I have it so owners can set up rules like, if a specific rank sends a message that contains {{red}}, then make the entire message appear red. But there isn't a way to say "if they say font-color=[var], check what's in [var], and apply a CSS rule to that". CSS isn't that dynamic.

Thanks!!!