8 CSS tricks to style up your mobile group chat theme


When you want to design your chat theme using CSS, you can design your web version, which means how it will look in your PC, laptop…see here how.

Now, since the mobile version is totally different than the web version, one have the option to create their own custom mobile CSS design.  RumbleTalk introduced a feature that allows customers to design also their mobile group chat theme using CSS.

Using CSS adjustment is an advanced 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. Then you should choose the Advance Design button and click the Mobile CSS tab.

You can see below some common tricks asked by customers to control their mobile design.

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.

.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