How can I change the chat background?

Open the admin panel.

Then switch to the 'Advanced Design' section.

Switch to the advanced design section

Choose what to change.

You can change each area individually.

The general, user list, chat area, dialog box and text box areas all share the same color and image selection controls.

The message area has only color controls, but up to 16 colors can be set.

Choose the area to change

General, user list, chat area, dialog box and text box.

The general tab sets the background that appears behind the chatroom, and is visible through any areas with transparent backgrounds.

All the other areas are on top of the general background, and will show the general background if their background is set to transparent.

Choose a background color The color and style of your chatroom is fully configurable

Setting a color.

Click on the color swatch to open the color picker.

Use the built in color picker

Choose the color you want to apply and click 'OK'.

See your changes previewed live

The live preview at the right of the page will show your changes, but you have to click 'Save' at the top of the page to apply them to your chat room.

Apply your changes easily

Setting an image.

The image must be hosted online - grab the address for the image and paste it into the box shown.

Choose an online image to use as the background

As with the color, the live preview will update, but you must click 'Save' at the top of the page to apply to your chat room.

See what your chosen image will look like before you apply it to your chatroom

The message background.

This sets the background color that appears behind the individual messages, up to 16 colors may be selected - they will be used in a 'round-robin' way.

Set up to 16 background colors for messages

You can reset any changes by reapplying the skin.

Switch to the 'Choose Skin' panel, choose a skin and click 'Save'.

Revert your changes

Advanced users can control the style and appearance further by editing the CSS.

Any changes made in the CSS editor can be reverted by switching back to the visual editor.

Directly modify the CSS