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)
