One of the best 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 Appearance tab of your Dashboard.
To the right of the settings, you can see a live preview of the four display modes available. Every change you make will be shown there in real time.
Font family and Template
These menus allow you to select font and its size.
Select color scheme
If you don’t want to customize every element on your own, you can select a preset color scheme and adjust it if needed.
Once done, please be sure to click “Apply changes” before leaving the page. Otherwise the changes won’t be saved and you’ll have to start all over again.
User 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.
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.
Forms
Button primary background – the color of the primary buttons in forms. (Login, Sign up, Edit profile) when dormant (for example: Log In, Enter as a guest, Sign up, and Update).
Button primary hover background – the color of the primary buttons when you hover your mouse over them.
Button primary disabled background – the color the primary buttons change to when clicked.
Button secondary background – the color of the secondary buttons in forms
(Login, Sign up, Edit profile) when dormant (for example: Cancel, Sign up.
Button secondary hover background – the color of the secondary buttons when you hover your mouse over them.
Button secondary disabled background – the color the secondary buttons change to when clicked.
Primary text – the color of the text in the main login screen (includes the word Login up top and the Edit profile form).
Error text – the color of the text that shows up when you click Log in while no details were entered (also in the Edit profile form when an error occurs).
Button primary text – the Log In/Enter as a guest/update button text color.
Button primary hover text – the Log In/Enter as a guest/update 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/Cancel button text color.
Button secondary hover text – the Sign Up[A1] /Cancel 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.
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.
Button background – the color of the background in the user selection menu which appears after clicking “Start new chat” and “Find users”.
Button hover background – the color of the background in the menu when you hover your mouse over it.
Button text – the color of the text in the user selection menu which appears after clicking “Start new chat” and “Find users”.
Button hover background – the color of the background in the menu.
Button hover text – the color of the text in the menu when you hover your mouse over it.
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 (In: Toggle menu on the right side).
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 of the top right corner feature description boxes (Close, Flip, Pop out; hover over the icons to see the descriptions).
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 feature description boxes (Close, Flip, Pop out; hover over the icons to see the descriptions).
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).
Typing indicator primary color – the color of the speech bubble shown when a user is typing.
Typing indicator secondary color – the color of the three dots in the speech bubble shown when a user is typing.
Resize elements – the color of the line which appears when you click and drag a chat window to resize it.
Fixed windows navigation button background – the color of the button with the number of rooms or chats open when there are multiple chatrooms and/or private chats displayed in the outside or tabbed modes (chatrooms display mode-> outside and Private chats chat display mode-> tabbed).
Fixed windows navigation button font – the color of the text (numbers) on the button displayed when there are multiple chats/chatrooms minimized.
Footer background – the color of the “We run on Chatwee” footer.
Footer text – the color of the text in the “We run on Chatwee” footer.
Tabbed layout
Tab buttons color – the color of the tabs (Rooms Support, Chats…) in the tabbed layout.
Tab buttons font color – the color of the text in the tabs.
Selected tab underline color – the color of the line under the selected tab.
Main content font color – the color of the main text in the selected tab.
Main content background color – the background behind the content in the selected tab.
Toolbar background – the color of toolbars (both top and bottom).
Toolbar font color – the color of the text in the toolbars (Includes the name of the chat and the username).
Main list items icon color – The color of graphic elements such as avatars and room icons shown when a tab is open.
Main list items font hover color – the color of the text beside the elements listed in open tabs when you hover your mouse over it.
Fixed display mode
Toolbar background color – the color of the toolbar with Pop out, Flip, Close (works in the Embedded mode [MP2] [MP3] [A4] too).
Toolbar buttons color – the color of Pop out, Flip, Close buttons (works also in the embedded mode too).
Minimized button background color – the color of the circular button which appears when the chat is minimized.
Minimized button font color – the color of the speech bubble on the button which appears when the chat is minimized..
Resize icon button – the color of dots in top left or right corner, used to resize the chat window.
Smile picker
Icons color – the color of emoji categories.
Background color – the color of the background behind the emojis.
Header section background – the color of the background behind the emoji categories.
Selected header icon color – the color of the emoji category currently picked.
Mobile chatwee
Toolbar background color – the color of the top toolbar (with the chat name and options).
Toolbar font color – the color of the toolbar text.
Minimized button background – the color of the circular button which appears when the chat is minimized.
Minimized button color – the color of the speech bubble on the button which appears when the chat is minimized.
Group chats
Chatroom toolbar background – the background of the toolbar with the name of the room.
Chatroom toolbar primary color – the color of the chat name on the toolbar.
Chatroom toolbar secondary color – the color of current user number.
Chatroom toolbar icon color – the color of the room icon on the toolbar.
Fixed chatroom window border – the color of the chatroom border line.
Conversations
Conversation toolbar background – the color of the toolbar (with the username on) in private and group chats (chatrooms display mode-> outside and Private chats chat display mode-> tabbed).
Conversation toolbar font color – the color of the toolbar text (with the username on) in private and group chats.
Fixed conversation window border – the color of the conversation window border line.
Compact layout
Sidebar background color – the color of the background behind the user list and community sidebar.
Sidebar font color – the color of the text on the sidebar.
Sidebar icon color – the color of the icons on the sidebar.
Main title font color – the color of the chat name and your username in the sidebar.
Main title background color – the color of the top bar with the chat name.
Sidebar items hover font color – the color of the text on the sidebar (usernames) when you hover your mouse over it.
Content background color – the background of the room/conversation that is currently open.
Selected room background color – the color of the background behind the room name in the sidebar when the room is open.
Selected room color – the color of the room name in the sidebar when the room is open.
Sidebar secondary color – secondary text color in the sidebar (user number in rooms).
Main content color – the color of the reactions count, toggle menu and moderator options beside[MP5] [MP6] [A7] a message.
Tabbed mobile layout
Tab buttons color – the color of tabs (Rooms Support, Chats…) in the mobile view.
Tab buttons font color – the color of the text in tabs.
Selected tab underline color – the color of the line under the selected tab.
Main screen tabs content text – the color of content in open tabs: usernames, icons, chatroom names.
Main content background – the color of background behind the main content in the open tabs.
Rooms
Room list font color – the color of the text (usernames) on the sidebar with a user list.
Room list icons – the color of the user icons on the sidebar in a room.
Room list hover color – the color of the text (usernames) on the sidebar in a room when you hover your mouse over it.
Messages
Bubble background – the color of the message bubble sent by other user.
My bubble background – the color of your message bubble.
Bubble text – the color of the text in the other user’s message bubbles.
My bubble text – the color of the text in your message bubble.
Bubble avatar – the color of avatars in the chat, next to the message bubbles.
Message time / typing info – the color of chat message time stamps.
Message input text – the color of the text in the typing box (Type here…).
Message input icons – the color of the icons beside the text input – the smile icon, the microphone, and the paperclip.
Message links color – the color of links in the chat.
Custom CSS
Enter your own CSS code here
