Skip to main content

Chat Appearance

To edit appearance settings for your chat, go to the chat settings page and click Appearance.

Custom CSS​

This feature is supported on the Community plan and higher.

Cascading Style Sheets (CSS) is a very powerful feature that allows you to customize your chat in almost any way that you can think of.

Cool Examples​

Making special commands​

You can make special commands by making use of the [data-firstword] property:

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

This will allow owners to say "Remember: Check out example.com every hour!" and the message will appear at 45 pixels in height. No other ranks can do this, and all other owner messages are unaffected.

Chat Style​

You can customize your chat appearance by changing the chat style.

Chat Background​

You can upload a chat background to customize your chat appearance. This shows within the chat.

Note: Uploaded pictures can never be inappropriate, offensive, shocking, or otherwise in violation of the Terms of Service.

Chat Background Type​

If you've uploaded a background, you can modify this setting to change where the background shows:

Keep Behind Message Window​

This option will have your background show up behind the message window only.

Keep Behind Message Window (No Frost Effect)​

This option will have your background show up behind the message window only without a frost effect over the background.

The frost effect helps prevent the background from interfering with the readability of messages, but you can use this option to avoid it.

Spread to Entire Chat​

This option spreads the background across the entire chat, instead of the message window only.

Font​

Change your chat's font style with Fonts! You can use one of the pre-selected defaults, or use Google Fonts to choose from one of hundreds of fonts for your chat.

This feature is available on the Basic plan and higher.

Using Standard Fonts​

Click on the "Default" option to change it, and you'll see several standard fonts listed.

Using Google Fonts​

Select the "More..." option and you'll be able to input a URL to use a custom font from Google Fonts.

Next, go to https://fonts.google.com, and either search for a font and select it from the results, or click on one of the pre-populated results.

Then, copy the URL there, and paste it in to the text box in the Fonts editor.

The URL should be something like: https://fonts.google.com/specimen/PT+Serif

Click Save Changes, and your font will be applied to your chat!

Tips and Warnings​

You should make sure your font is legible for all users. Fonts which make the text harder to see may result in fewer people visiting your chatroom. After all, the messages are the most important part!

A good font is clear, not too small, and has letters that are easily distinguishable from one another.

You should pick a font that distinguishes between a capital "i" and a lowercase "L". For instance, if a user's name is "leo", a user could make their registered name "ieo" with a capital i, and your Moderators/Admins may get them confused. Fonts that have a "serif" usually prevent this from being an issue.

Message Color​

This feature is available on the Basic plan and higher.

You can select a message color (default is black) here.

Show User List​

This feature is available on the Community plan and higher.

You can modify whether the user list shows here.

Message bubble background color​

You can set a message bubble background that shows up behind messages.

Chat accent color​

You can modify the chat accent color using this option.

This applies to certain icons in the chat, as well as the scrollbar.

Rank colors​

You can customize the colors shown in the chat for each rank, as well as the color shown for offline users.

Prevent the textbox from increasing in size as users type​

This will keep the textbox a fixed size as users type -- even if they add new lines.