CSS Theme Library — Chatroll Support

Here are some pre-designed themes that you can add to your own chat by copying the CSS provided. Each of the following chats is a real instance of Chatroll. Try them now!

To use this theme, make sure you have the following settings under Settings > Appearance

Enter this CSS code into the Custom CSS field:

.chat-wrapper {
    bottom: 28px;
}
.chat-name {
    color: #666666;
}
.chat-welcome-message {
    color: #999999;
}
.chat-messages {
    margin: 4px;
}
.chat-contacts-container, .chat-contacts-divider, .chat-contacts-banner {
    background: #F7F7F7;
}
.chat-input {
    padding: 6px;
}
.signin-box {
    background-color: #d1d8db;
}

.chat-wrapper {

bottom: 28px;

}

.chat-name {

color: #666666;

}

.chat-welcome-message {

color: #999999;

}

.chat-messages {

margin: 4px;

}

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

background: #F7F7F7;

}

.chat-input {

padding: 6px;

}

.signin-box {

background-color: #d1d8db;

}

To use this theme, make sure you have the following settings under Settings > Appearance

Enter this CSS code into the Custom CSS field:

.chat-wrapper {
    bottom: 28px;
}
.group-chat-embedded a {
    color: #0088bb;
}
.chat-welcome-message {
    color: #666666;
}
.chat-messages-container, .chat-contacts-divider, .chat-contacts-container {
    top: 44px;
}
.chat-messages-container {
    left: 15px;
}
.chat-contacts-container {
    right: 15px;
    width: 100px;
}
.chat-name {
    left: 15px;
    top: 12px;
}
.chat-contacts-banner {
    width: 103px;
    right: 15px;
}
.chat-input-container {
    left: 5px;
    right: 5px;
}
.chat-messages-container {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.message {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.message-content {
    padding-left: 46px;
}
.message-profile-image {
    left: 2px;
}
.message:last-child {
    border-bottom: none;
}
.message-timestamp {
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    color: #666666;
}
.message-group-items {
    margin-top: 6px;
}
.chat-contacts-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    right: 118px;
}
.chat-contacts-container {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 103px;
}
.chat-contacts {
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.contact-list-profile-image {
    display: none;
}
.contact-list-profile-name {
    color: #666666;
    font-size: 11px;
    padding: 2px 0 0 4px;
}
.contact-list-profile-name a {
    color: #666666;
}
.chat-online-count {
    color: #666666;
    font-size: 9px;
    text-transform: uppercase;
    top: 4px;
}
.chat-contacts-banner {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-input {
    background: #ffffff;
    color: #282828;
    font-size: 13px;
    padding: 6px;
}
.signin-prompt {
    padding-top: 10px;
    color: #FFFFFF;
}

.chat-wrapper {

bottom: 28px;

}

.group-chat-embedded a {

color: #0088bb;

}

.chat-welcome-message {

color: #666666;

}

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

top: 44px;

}

.chat-messages-container {

left: 15px;

}

.chat-contacts-container {

right: 15px;

width: 100px;

}

.chat-name {

left: 15px;

top: 12px;

}

.chat-contacts-banner {

width: 103px;

right: 15px;

}

.chat-input-container {

left: 5px;

right: 5px;

}

.chat-messages-container {

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

}

.message {

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

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

}

.message-content {

padding-left: 46px;

}

.message-profile-image {

left: 2px;

}

.message:last-child {

border-bottom: none;

}

.message-timestamp {

font-size: 8px;

font-weight: bold;

text-transform: uppercase;

color: #666666;

}

.message-group-items {

margin-top: 6px;

}

.chat-contacts-divider {

width: 1px;

background: rgba(255, 255, 255, 0.1);

right: 118px;

}

.chat-contacts-container {

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

width: 103px;

}

.chat-contacts {

padding-top: 6px;

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

}

.contact-list-profile-image {

display: none;

}

.contact-list-profile-name {

color: #666666;

font-size: 11px;

padding: 2px 0 0 4px;

}

.contact-list-profile-name a {

color: #666666;

}

.chat-online-count {

color: #666666;

font-size: 9px;

text-transform: uppercase;

top: 4px;

}

.chat-contacts-banner {

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

}

.chat-input {

background: #ffffff;

color: #282828;

font-size: 13px;

padding: 6px;

}

.signin-prompt {

padding-top: 10px;

color: #FFFFFF;

}

To use this theme, make sure you have the following settings under Settings > Appearance

Enter this CSS code into the Custom CSS field:

.chat-wrapper {
    bottom: 28px;
}
.group-chat-embedded {
    background-color: #68615d;
}
.chat-messages {
    margin-top:6px;
}
.chat-messages-container {
    left: 0px;
}
.chat-welcome-message {
    color: #ce5e48;
}
.chat-input-container {
    background: #68615d;
}
.message-timestamp {
    color: #b7b1ac;
    font-size: 0.8em;
}
.chat-input {
    font-size: 13px;
    padding: 6px;
    background: #ffffff;
}
.chat-contacts-container {
    background: #f7f7f7;
    right: 0px;
    width: 130px;
}
.chat-contacts {
    margin-top:6px
}
.chat-contacts-banner {
    background: #D4D4D4;
    width: 130px;
    right: 0;
}
.chat-contacts-divider {
    background: #e4e4e4;
}
.signin-box {
    background-color: #68615d;
}
.signin-prompt {
    padding-top: 12px;
    color: #aaaaaa;
}

.chat-wrapper {

bottom: 28px;

}

.group-chat-embedded {

background-color: #68615d;

}

.chat-messages {

margin-top:6px;

}

.chat-messages-container {

left: 0px;

}

.chat-welcome-message {

color: #ce5e48;

}

.chat-input-container {

background: #68615d;

}

.message-timestamp {

color: #b7b1ac;

font-size: 0.8em;

}

.chat-input {

font-size: 13px;

padding: 6px;

background: #ffffff;

}

.chat-contacts-container {

background: #f7f7f7;

right: 0px;

width: 130px;

}

.chat-contacts {

margin-top:6px

}

.chat-contacts-banner {

background: #D4D4D4;

width: 130px;

right: 0;

}

.chat-contacts-divider {

background: #e4e4e4;

}

.signin-box {

background-color: #68615d;

}

.signin-prompt {

padding-top: 12px;

color: #aaaaaa;

}

Show us your great CSS customizations!
Email your customized CSS code and a screen shot to support@chatroll.com

Chatroll Support

Related Articles

Need more help?