CSS Code Library

Here is a list of CSS code modifications to help you customize your Chatroll module.


Outside Container

Change the container color (the background behind the entire chat)


Chat Border Images

Change the color of the module border (when border image is not used)

Shift the distance of the module container from the bottom


Chat Header

Change the color of the header

Modify the chat name


Chat Messages Container

Change the background color in the chat

Shift the distance of the chat container from the top

Change the color of the Welcome Message

Make avatars round


Chat Messages

Modify messages in the chat

Modify the time stamp

Modify the distance between the avatar and messages in the chat

Modify the distance between a link preview and the previous message

Modify the distance between the first avatar and the top of the chat

Modify avatars in the chat

Modify the Message Delete button

Remove avatars in the main chat container


Chat Input Container

Modify the chat input

Modify the chat input wrapper

Modify the chat input container and text attributes

Move the chat input container to the top

To have new messages show at the top, you must set Message Order to Newest on Top under Settings > Appearance.


User List

Modify the width of the user list

Change the color of the user list container


User List Item

Modify user list item

Modify the names in the user list

Modify avatars in the user list container

Remove the user list

You must set User List Position to Right under Settings > Appearance

Modify the status icon in the user list

Remove the status icon in the user list

Modify the the user list item

Modify the names of non-administrators in the user list

Modify the names of administrators in the user list

Modify the names of moderators in the user list

Modify the color of all usernames that are links

Modify links posted to the chat


Online Count Container

Modify the online count

Remove the online count

Modify the online count container

Remove the online count container

Modify the scroll bar location

Modify the location of the divider between the scroll bar and the chat


Status Message

Modify the Status Message

Modify the dimensions of the Status Message banner


Private Message Container

Modify the Private Message border

Modify the Private Message close button

Modify the Private Message title

Modify the Private Message background

For further assistance customizing CSS, please submit a request.

Was this article helpful?

Related Articles