CSS Code Library — Chatroll Support

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)

.group-chat-embedded {
    background-color: #ffffff;
}

.group-chat-embedded {

background-color: #ffffff;

}

Chat Border Images

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

.chat-wrapper {
    background: #cccccc;
}

.chat-wrapper {

background: #cccccc;

}

Shift the distance of the module container from the bottom

.chat-wrapper {
    bottom: 40px;
}

.chat-wrapper {

bottom: 40px;

}

Chat Header

Change the color of the header

.chat-top {
    background: #cccccc;
    height: 34px;
    right: 0;
}

.chat-top {

background: #cccccc;

height: 34px;

right: 0;

}

Modify the chat name

.chat-name {
    color: #000000;
    font-size: 1.65em;
    left: 10px;
    right: 10px;
    top: 7px;
    font-weight:bold;
}

.chat-name {

color: #000000;

font-size: 1.65em;

left: 10px;

right: 10px;

top: 7px;

font-weight:bold;

}

Chat Messages Container

Change the background color in the chat

.chat-messages-container {
    background: #f5f5f5;
}

.chat-messages-container {

background: #f5f5f5;

}

Shift the distance of the chat container from the top

.chat-messages-container, .chat-contacts-divider, .chat-contacts-container {
    top: 30px;
}

.chat-messages-container, .chat-contacts-divider, .chat-contacts-container {

top: 30px;

}

Change the color of the Welcome Message

.chat-welcome-message {
    color: #000000;
}

.chat-welcome-message {

color: #000000;

}

Make avatars round

.profile-icon-image {
    border-radius:50px;
}

.profile-icon-image {

border-radius:50px;

}

Chat Messages

Modify messages in the chat

.message {
    padding: 6px 6px 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #222222;
}

.message:last-child {
    border-bottom: none;
}

.message {

padding: 6px 6px 6px 0;

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

border-top: 1px solid rgba(0, 0, 0, 0.1);

color: #222222;

}

.message:last-child {

border-bottom: none;

}

Remove “(Admin)” next to administrators’ names

.message.admin .message-profile-type-label {
    display:none;
}

.message.admin .message-profile-type-label {

display:none;

}

Remove all labels next to names in the chat “(Admin)”, “(Moderator)”, “(Guest)”

.message .message-profile-type-label {
    display:none;
}

.message .message-profile-type-label {

display:none;

}

Modify the names and messages of administrators in the chat

.message.admin .message-profile-name a {
color: red;
background-color:yellow;
}

.message.admin .message-profile-name a {

color: red;

background-color:yellow;

}

Modify the names and messages of moderators in the chat

.message.moderator .message-profile-name a {
color: red;
background-color:yellow;
}

.message.moderator .message-profile-name a {

color: red;

background-color:yellow;

}

Modify the names and messages of guests in the chat

.message.guest .message-profile-name a {
color: red;
background-color:yellow;
}

.message.guest .message-profile-name a {

color: red;

background-color:yellow;

}

Modify the way users see their own names and messages in the chat

.message.self .message-profile-name a {
color: red;
background-color:yellow;
}

.message.self .message-profile-name a {

color: red;

background-color:yellow;

}

Modify the time stamp

.message-timestamp {
    color: #AAAAAA;
    font-size: 0.77em;
    height: 12px;
    line-height: 1em;
}

.message-timestamp {

color: #AAAAAA;

font-size: 0.77em;

height: 12px;

line-height: 1em;

}

Modify the distance between the avatar and messages in the chat

.message-content {
    padding-left: 50px;
}

.message-content {

padding-left: 50px;

}

Modify the distance between a link preview and the previous message

.message-group-items {
    margin-top: 6px;
}

.message-group-items {

margin-top: 6px;

}

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

.message-profile-image {
    top: 5px;
}

.message-profile-image {

top: 5px;

}

Modify avatars in the chat

.message-profile-image img {
    width: 22px;
    height: 22px;
    border-radius: 2px;
}

.message-profile-image img {

width: 22px;

height: 22px;

border-radius: 2px;

}

Modify the Message Delete button

.message-delete-button {
    top: 6px;
    right: 6px;
}

.message-delete-button {

top: 6px;

right: 6px;

}

Remove avatars in the main chat container

.message-profile-image {
    display: none;
}
.message-content {
    padding-left: 8px;
}

.message-profile-image {

display: none;

}

.message-content {

padding-left: 8px;

}

Chat Input Container

Modify the chat input

.chat-input-container {
    left: 5px;
    right: 5px;
    background: #cccccc;
}

.chat-input-container {

left: 5px;

right: 5px;

background: #cccccc;

}

Modify the chat input wrapper

.chat-input-wrapper {
    top: 0;
    left: 0;
    background: #cccccc;
    margin: 8px 0;
}

.chat-input-wrapper {

top: 0;

left: 0;

background: #cccccc;

margin: 8px 0;

}

Modify the chat input container and text attributes

.chat-input {
    font-family: Helvetica, Arial, sans-serif;
    color: #000000;
    font-size: 13px;
    padding: 6px;
    border-radius: 2px;
}

.chat-input {

font-family: Helvetica, Arial, sans-serif;

color: #000000;

font-size: 13px;

padding: 6px;

border-radius: 2px;

}

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.

.chat-input-container {
    top:34px;
}
.chat-input {
    resize:none;
}
.chat-messages-container {
    top: 89px;
    bottom: 6px;
}
.chat-contacts-container {
    top: 89px;
    bottom: 24px;
}
.chat-contacts-divider {
    bottom: 6px;
}
.chat-contacts-banner {
    bottom: 6px;
}
.chat-contacts-container-top-open {
    bottom: 24px;
    top: auto;
}
.chat-contacts-banner-top {
    top: auto;
}
.chat-contacts-divider-top {
    bottom: 24px;
    top: auto;
}
.chat-contacts-divider-top-open {
    bottom: 130px;
    top: auto;
}
.chat-messages-container-top-open {
    bottom: 130px;
}

.chat-input-container {

top:34px;

}

.chat-input {

resize:none;

}

.chat-messages-container {

top: 89px;

bottom: 6px;

}

.chat-contacts-container {

top: 89px;

bottom: 24px;

}

.chat-contacts-divider {

bottom: 6px;

}

.chat-contacts-banner {

bottom: 6px;

}

.chat-contacts-container-top-open {

bottom: 24px;

top: auto;

}

.chat-contacts-banner-top {

top: auto;

}

.chat-contacts-divider-top {

bottom: 24px;

top: auto;

}

.chat-contacts-divider-top-open {

bottom: 130px;

top: auto;

}

.chat-messages-container-top-open {

bottom: 130px;

}

User List

Modify the width of the user list

.chat-messages-container {
    right: 165px;
}
.chat-contacts-divider {
    right: 162px;
}
.chat-contacts-container {
    right: 5px;
}
.chat-contacts-container {
    width: 155px;
}
.chat-contacts-banner {
    width: 155px;
}

.chat-messages-container {

right: 165px;

}

.chat-contacts-divider {

right: 162px;

}

.chat-contacts-container {

right: 5px;

}

.chat-contacts-container {

width: 155px;

}

.chat-contacts-banner {

width: 155px;

}

Change the color of the user list container

.chat-contacts-container {
    background: #f5f5f5;
}

.chat-contacts-container {

background: #f5f5f5;

}

User List Item

Modify user list item

.contact-list-item {
    border-bottom: 1px solid #a05959;
    height: 21px;
    padding: 5px 0;
    position: relative;
    width: 100%;
}

.contact-list-item {

border-bottom: 1px solid #a05959;

height: 21px;

padding: 5px 0;

position: relative;

width: 100%;

}

Modify the names in the user list

.contact-list-profile-name {
    color: #000000;
    margin: 1px 1px 2px 10px;
}
.contact-list-profile-name a {
    color: #000000;
}

.contact-list-profile-name {

color: #000000;

margin: 1px 1px 2px 10px;

}

.contact-list-profile-name a {

color: #000000;

}

Modify avatars in the user list container

.contact-list-profile-image {
    right: 5px;
    top: 5px;
    padding: 2px;
}

.contact-list-profile-image {

right: 5px;

top: 5px;

padding: 2px;

}

Modify the status icon in the user list

.contact-list-status-icon {
    left: 3px;
    top: 8px;
}

.contact-list-status-icon {

left: 3px;

top: 8px;

}

Remove the status icon in the user list

.contact-list-status-icon {
    display:none;
}
.contact-list-profile-name {
    margin-left: 5px;
}

.contact-list-status-icon {

display:none;

}

.contact-list-profile-name {

margin-left: 5px;

}

Modify the the user list item

.contact-list-item {
    border-bottom: 1px solid #e8e8e8;
    height: 25px;
    padding: 3px 1px 1px 1px;
}

.contact-list-item {

border-bottom: 1px solid #e8e8e8;

height: 25px;

padding: 3px 1px 1px 1px;

}

Modify the names of non-administrators in the user list

.contact-list-profile-name {
    color: #999999;
    font-size: 12px;
    font-weight: normal;
}

.contact-list-profile-name {

color: #999999;

font-size: 12px;

font-weight: normal;

}

Modify the names of administrators in the user list

.contact-list-item.admin .contact-list-profile-name a {
color:#00ff00;
}

.contact-list-item.admin .contact-list-profile-name a {

color:#00ff00;

}

Modify the names of moderators in the user list

.contact-list-item.moderator .contact-list-profile-name a {
color:#ff0000;
}

.contact-list-item.moderator .contact-list-profile-name a {

color:#ff0000;

}

Modify the names of guests in the user list

.contact-list-item.guest .contact-list-profile-name a {
color:#0000ff;
}

.contact-list-item.guest .contact-list-profile-name a {

color:#0000ff;

}

Modify the way users see their own names in the user list

.contact-list-item.self .contact-list-profile-name a {
color:#0000ff;
}

.contact-list-item.self .contact-list-profile-name a {

color:#0000ff;

}

Modify the color of all usernames that are links

a {
    color: #222222;
    text-decoration: none;
}

a {

color: #222222;

text-decoration: none;

}

Modify links posted to the chat

.group-item-small {
    background: #f4f4f4;
    height: 42px;
    margin: 1px 3px 1px 1px;
    max-width: 260px;
}

.group-item-small {

background: #f4f4f4;

height: 42px;

margin: 1px 3px 1px 1px;

max-width: 260px;

}

Online Count Container

Modify the online count

.chat-online-count {
    color: #080;
    font-size: 9px;
    text-transform: uppercase;
    top: 4px;
    left: 12px;
}

.chat-online-count {

color: #080;

font-size: 9px;

text-transform: uppercase;

top: 4px;

left: 12px;

}

Remove the online count

.chat-online-count {
    display: none;
}

.chat-online-count {

display: none;

}

Modify the online count container

.chat-contacts-banner {
    background: #fcfcfc;
    width: 155px;
}

.chat-contacts-banner {

background: #fcfcfc;

width: 155px;

}

Remove the online count container

.chat-contacts-banner {
    display: none;
}

.chat-contacts-banner {

display: none;

}

Modify the scroll bar location

.chat-messages-container {
    right: 165px;
}

.chat-messages-container {

right: 165px;

}

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

.chat-contacts-divider {
    right: 162px;
    width: 1px;
}

.chat-contacts-divider {

right: 162px;

width: 1px;

}

Status Message

Modify the Status Message

.chat-sticky-message {
    background: #ffffe0;
    border: 1px solid #e6db55;
    font-size: 0.9em;
    left: 7px;
    padding: 6px;
    right: 136px;
    top: 34px;
}

.chat-sticky-message {

background: #ffffe0;

border: 1px solid #e6db55;

font-size: 0.9em;

left: 7px;

padding: 6px;

right: 136px;

top: 34px;

}

Modify the dimensions of the Status Message banner

.chat-sticky-message-top {
    left: 5px;
    right: 20px;
    top: 56px;
}

.chat-sticky-message-top {

left: 5px;

right: 20px;

top: 56px;

}

Private Message Container

Modify the Private Message border

.popup-shadow {
    background: #555;
    bottom: -5px;
    left: -5px;
    opacity: 0.5;
    right: -5px;
    top: -5px;
}

.popup-shadow {

background: #555;

bottom: -5px;

left: -5px;

opacity: 0.5;

right: -5px;

top: -5px;

}

Modify the Private Message close button

.popup-close-button {
    right: 6px;
    top: 6px;
}

.popup-close-button {

right: 6px;

top: 6px;

}

Modify the Private Message title

.popup-title {
    background: #eaeaea;
    font-weight: bold;
    padding: 5px 20px 5px 5px;
}

.popup-title {

background: #eaeaea;

font-weight: bold;

padding: 5px 20px 5px 5px;

}

Modify the Private Message background

.popup-content {
    background: #fafafa;
    padding: 10px;
    text-align: center;
}

.popup-content {

background: #fafafa;

padding: 10px;

text-align: center;

}

For further assistance customizing CSS, please submit a request.

Chatroll Support

Outside Container

Chat Border Images

Chat Header

Chat Messages Container

Chat Messages

Chat Input Container

User List

User List Item

Online Count Container

Status Message

Private Message Container

Related Articles

Need more help?