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

Changing Texts

To change the "Friends" text in the left sidebar to Buddies, put in this code:

#friendstext,#friendstext2,#friendstext3{font-size:0px;}#friendstext::before,#friendstext2::before,#friendstext3::before{font-size:15px;content:'Buddies';}

This sets the existing "Friends" text to a font-size of 0px, meaning that it won't show up at all. Then, we use the ::before attribute to set the content to Buddies, and the font-size to 15 pixels -- the same size that the old #friendstext div ID was.

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.