Today, I am going to teach you how to use CSS on Minnit Chat to create your very own feature to get people's attention. This feature will make your message big and red, if you begin your message with Attention!

Let's begin.


Step 1 - Formatting the Messages

This is just simple CSS, and is mostly for demonstration, so you understand how to make messages big and red.

Copy and paste the following code into your CSS box:

.msgText{color:red !important;font-size:28px !important;}

You can see in the preview, that this will make all messages big and red, which is a good start. Example:

preview


Step 2 - Using the "messages" data-attribute.

Obviously we don't want every message to turn big and red, because that's annoying. That's where the "messages" data attribute comes to the rescue. By making a CSS rule that only applies to a specific attribute, we are able to make our CSS rule only apply to messages that begin with "Attention!". By doing the following, we can achieve this. You can see more information on how to handle attributes with CSS on this guide, by CSS-Tricks, but for this purpose, we will be using the [data-value^="foo"] example they provide, as it will only target messages that begin with "Attention!". So, if someone includes it elsewhere in the message, it won't be affected.

Here is the code you will need:

.msgText[data-message^="Attention!"]{color:red !important;font-size:28px !important;}

Here is the example, so we can see that we've done it -- we created our very own "Attention!" command, and messages that don't begin with "Attention!" are ignored:

preview


Step 3 - Preventing just anyone from catching attention.

Let's be honest, we don't want anyone to waltz into our chat & start shouting in big red font. It should be used for important scenarios only. So, let's make a rule that only applies to the chat owner.

Messages all have a class name which includes the rank. The values are:

.msgText-visitor
.msgText-regular
.msgText-mod
.msgText-manager
.msgText-owner

So, let's set it up so only Owners can use it:

.msgText-owner[data-message^="attention!"]{color:red !important;font-size:28px !important;}

Now, only Owners can get their messages shown in big, red font. And, they can only do this if they begin their message with "Attention!", so they can talk normally, as well.

preview


That's all for today. Remember, you can tweak the code I provided, to make messages a different color, or make them even bigger than I made them. The sky's the limit!

Be sure to check out https://minnit.chat/pricing to see how you can get a Community or Pro chat, and get access to the CSS design tool.

If you have any questions, feel free to make a new thread on this board, and we'll be happy to help!

Happy chatting!