Chat Color Customization Guide by Chatwee

One of the coolest things about Chatwee is that it’s highly customizable. There’s a whole lot of features you can conveniently switch on and off in your Dashboard. On top of that, you can edit the looks of the widget as well, to make it a great fit with the design of your site. Color customization options available with Chatwee are many and may confuse a novice user, so here’s a little something to help you navigate the STYLE tab of your Dashboard.

For various technical reasons we weren’t able to descriptively name each end every color picker available. This article attempts to expand on the issue and provide a more detailed description of what each and every option does.

I’m going through all of them, one by one, but at the same time, I’ve highlighted some of the most crucial ones, so you can do a quick customization right away, should the need be.

If you’re planning to do a major color customization of your chat widget, you may want to select 3-4 main colors you’re going to work with before you even start. This rabbit hole goes deep.

Also, please keep in mind that changing the chat’s color scheme is only possible with Pro and Ultimate plans. Feel free to apply for a trial if you’d like to give color customization a go but are currently subscribed to one of the other plans.

Control panel

Main background – the color of the left column, where you have your chat name, both before you log in and after

Selected room background – the color of the bar highlighting the selected chat room

Chat name – the color of the chat name in the left column

User name – the color of the username (you) in the top left corner, under the chat name

Sections text – the color of the main sections in the left column – ROOMS, CHATS, COMMUNITY, as well as room and usernames

Section header bracket text – the color of the counters you see in the brackets for ROOMS, CHATS, and COMMUNITY

Section content text hover – the color used to highlight the room or username when you hover your mouse over it

Selected room text – the color of the room name you’re currently in

Icons – the color of the room pin icons, as well as the guest user avi background (TIP: use in connection with Top toolbar > Room icon / Conversation avatar icon)

Main menu

Avatar background – the color of the main background in the user dropdown menu

Buttons background – the background color of the particular user menu items

Button hover background – the background color of the particular user menu items when you hover your mouse over them

Avatar icon color – the color of the actual guest user avatar (TIP: use in connection with Control panel > Icons)

User name – the color of the username in the user dropdown menu

Button text – the color of the user dropdown menu items text

Button hover text – the color of the user dropdown menu items text when you hover your mouse over them

Chat

Chat background – the color of the main conversation window background

User list/archive list background – the color of the column on the right, where the user list is, for example (TIP: make it slightly darker than the Chat background)  

Smile picker background – the background color of the emoji window

Smile picker header background – the color of the top bar of the emoji window (TIP: make it slightly darker than the Smile picker background)

Bubble background – the background color of an actual message bubble (for users other than yourself)

My bubble background – the background color of an actual message bubble (for your messages; TIP: make it differ from the Bubble background)

Bubble text – the color of the text of a chat message (for users other than yourself)

My bubble text – the color of the text of a chat message (your posts)

Message time/typing info – the color of timestamps and the typing indicator

Bubble avatar – the color of the guest user avatar (TIP: use in connection with Top toolbar > Room icon / Conversation avatar icon)

Message input text – the color of the text in the input bar

Message input icons – the color of the 2 little icons on the right of the input bar – a clip and a smiley

Smile picker header icon – the color of the emoji sitting on the top bar of the emoji window

Smile picker header selected icon – the color of the emoji on the top bar of the emoji window after you click it – select an emoji category (TIP: make it a bit darker)

Smile picker text – the color of the names of emoji categories

Users list/archive list text – the color of usernames in the right column

Users list/archive list icons – the color of guest user avatars in the right column

Users list/archive list hover text – the color of usernames in the right column when you hover your mouse over them

Top toolbar

Main background – the color of the uppermost section, where the room name is (TIP: you may want to make it a bit brighter than the left column)

Toolbar buttons background – the background color of the top right field of the chat, where the 3 little buttons are

Room/conversation name – the color of the room name text

Room users count – the color of the particular room user number text

Room icon – the color of the pin icon on the top bar (TIP: use in connection with Control panel > Icons)

Conversation avatar icon – the color of the guest user avatar you see after you initiate a private conversation (TIP: use in connection with Control panel > Icons)

Toolbar button icon – the color of the 3 little buttons in the top right corner of the chat

Menu toggle button icon – the color of the little toggle menu you can open right under the buttons in the top right corner

Forms

Button primary background – the color of the Log In button when dormant

Button primary hover background – the color of the Log In button when you hover your mouse over it

Button primary disabled background – the color the Log In button changes to when clicked

Button secondary background – the color of the Sign Up button when dormant

Button secondary hover background – the color of the Sign Up button when you hover your mouse over it

Button secondary disabled background – the color the Sign Up button changes to when clicked

Primary text – the color of the text in the main login screen (includes the word Login up top)

Secondary text – the color of the text in the main login screen (includes Forgot password? Log in with your social profile / or / Enter as a Guest)

Error text – the color of the text that shows up when you click Log in while no details were entered

Button primary text – the Log In button text color

Button primary hover text – the Log In button text color when you hover your mouse over it

Button primary disabled text – the color of the text when you click the button (TIP: related to Button primary disabled background)

Button secondary text – the Sign Up button text color

Button secondary hover text – the Sign Up button text color when you hover your mouse over it

Button secondary disabled text – the color of the text when you click the button (TIP: related to Button secondary disabled background)

Input text – the color of the email and password text you type in

Input label text – the color of the input field prompts

Icons – the color of the default avatar in the Edit profile screen (accessible from the drop down user menu)

User preview

Background – the color of the box appearing after a mod hovers his mouse over a chat user’s avatar

Text – the color of the text displayed in the pop up user box after a mod hovers his mouse over a chat user’s avatar (includes username and Ban user)

Avatar icon – the color of the default user avatar

Minimized chat switch

Background – the color of the minimized chat icon (Fixed tab display mode)

Icon color – the color of the little chat bubble inside the icon

Notifications

Standard background – the color of the login confirmation box (displayed at the bottom of the screen)

Error background – the color of the box that appears if there’s a connection error (displayed at the bottom of the screen)

Standard text – the color of the text on the login confirmation box

Error text –  the color of the text on the error box

Dropdown (dropdown user menu)

Button background – the color of the menu item background when dormant

Button hover background – the color of the menu item background when you hover your mouse over it

Button text – the color of the menu item text

Button hover text – the color of the menu item text when you hover your mouse over it

Other elements

Badge background – the color of the new post notification – a small circle appearing next to the username in the left-hand column

Scrollbar – changes the color of the scrollbar across the entire chat

Loader – the color of the spinning circle when messages or user list are loading

Tooltip background – the background color for the top right corner features (Close, Flip, Pop out)

Badge text – the color of the counter on the new post notification (related to Badge background)

Tooltip text – the color of the text of the top right corner features (Close, Flip, Pop out)

Admin icon – the color of the star icon that an admin has right next to his avatar (make this color stand out so that it’s clear the user is an admin)