8 CSS tricks to style up your mobile group chat theme

image

Many customers design their own chat room theme using CSS. Lately we introduced a new feature that allow customer to design also their mobile group chat theme using CSS.

Using CSS adjustment is an advance feature that is available for customers with css knowledge.

In order to change your chat theme, you will need to login to Rumbletalk admin panel. Than you should choose the Advance Design button and click the Mobile CSS tab.

1. Changing the default image of a guest user using css

User icon guest   You may change the default guest user for your mobile group chat to any image by using your own image url.

.user-image,
.message-user-image {
width: 0 !important;
padding-right: 32px;
background-image: url(“//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-blue.png”);
background-repeat: no-repeat;
}

user image change via css

2. Changing the ADMIN image

User icon admin   You may change the default ADMIN user to any image by using your own image url.

.admin .user-image,
.admin .message-user-image {
background-image: url(“//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-white.png”);
}

2. Changing the ADMIN text color

You may change the default ADMIN text color.

.admin .message-user-name,
.admin .user-name {
color: #2DA8E0 !important;
}

3. Changing the Top Bottom Bar color

You may change the color on the header and footer area of your mobile chat.

.top-bar { background-color: #3D5B9B !important; }
#bottom { background-color: #3D5B9B !important; }

header and footer color change

4. Changing the chat background color

You may change the chat background from white to any color you want.

#chat { background-color: #607D8B !important; }

5. Load background image

You may load any image as your mobile chat background.

#chat { background: url(“//d1pfint8izqszg.cloudfront.net/images/skins/40000/background.jpg”) no-repeat scroll left center; }

change chat background color

6. Change Fonts size

You may change the size of the font to your own liking.

Font of the messages a users send:
#chat { font-size: 20px !important; }
 
User name font in the chat area (next to the messages):
.message-user-name { font-size: 20px !important; }
 
The user name font in the users list:
.user-name { font-size: 20px !important; }
 
Font in the setting buttons:
#options-dd li a span { font-size: 20px !important; }

7. Hide Buttons in the menu

You may hide buttons in the mobile menu view.

Hide Full Screen button
.opt-full-screen { display: none; }

Hide QR code buttons
.qr-li { display: none; }

Hide small size fonts button
.opt-sm-font { display: none; }

Hide big font button
.opt-big-font { display: none; }

Hide pin the position button
.pin-li { display: none; }

Hide sound on/off button
.sound-li { display: none; }

8. Change Message background color

Changing the message background color include, changing the background, changing the text color and changing the tip at the message (the small triangle pointing to the user image).

.message-bubble { background-color: #333333 !important; }
.message-text { color: #ffffff !important; }

.main-message-container::after { border-right-color: #333333 !important; }
.main-message-container::after { border-left-color: #333333 !important; }

Share Button