Make an "Announce" feature for your chat using CSS

Custom CSS
1

Using CSS, you are able to make it so messages you send stand out from the rest.

To do this, you’ll need to write some simple CSS code in your chat (Community plan & higher):

.msgText-owner{font-size:2em !important;}

This will make it so all messages sent by Owners appear 2x as large.

However, if you want to make it so only messages containing a certain phrase trigger this rule, you can do so by writing a rule that reads the data-message attribute. data-message contains a simplified version of the message, so you can write CSS. For instance:

.msgText-owner[data-message^=“attention”]{font-size:2em !important;}

This makes it so any message that begins with “Attention”, and sent by an Owner, will appear larger than normal.

Want to add more ranks? We support the following classes:

  • msgText-owner
  • msgText-manager
  • msgText-mod
  • msgText-regular
  • msgText-visitor

So, to make it so any message sent by a Mod/Manager/Owner, and starting with “Attention”, get enlarged, do:

*:is(.msgText-owner, .msgText-manager,.msgText-mod)[data-message^="attention"]{font-size:2em !important;}

Want more changes? You can change the color, make it bold, and more – the possibilities are endless:

*:is(.msgText-owner, .msgText-manager,.msgText-mod)[data-message^="attention"]{font-size:2em !important;color:red;font-weight:bold;}

Enjoy!

2 Likes