This guide will assist you to match the CometChat default theme with your site colors. This is basic tutorial can help you theme CometChat even if you have no knowledge about CSS.

You can always use our in-built theme editor to change colors directly via CometChat Administration Panel.

• Get the HEX values for 3 shades of a single color that you would like to base the CometChat bar on. For simplicity, let us call them dark, darker and darkest.

For this example we are using the following values:

Dark - #666666
Darker - #999999
Darkest - #000000

• Edit the cometchat.css file via CometChat Administration Panel or manually via FTP cometchat/themes/default/css/cometchat.css

Find and delete the following line (2 instances):

background: url(themes/default/images/bgbar.png) repeat-x top left;

Search and replace #3e92bd with #666666

Search and replace #11648f with #000000

Search and replace #1979A2 with #999999

• After these modifications CometChat will look like: