CSS Theme Library

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!

Minimal Design

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;
}

Dark Design

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;
}

Warm Color Design

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;
}

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