9 CSS tricks to style up your mobile group chat theme

image

When you want to design your chat theme using CSS, you can design your web version with the admin panel. This will change the chat’s look on your PC & laptop. See here instructions on how to do it.

Now, since the mobile version is totally different than the web version, one has 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.

All you have to do is:

  1. Copy the CSS code you find suitable from this post.
  2. Log into your RumbleTalk admin panel.
  3. In the chat settings, under “Design”, click on “Add CSS for Mobile Browsers”.
  4. Paste your code and close the box.

mobile css editor

 

Using CSS adjustment is an advanced feature that is available for customers with CSS knowledge.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.


.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 and/or Bottom Bar color

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


.top-bar,
#top-bar-left,
#top-bar-right { background-color: #3D5B9B; }
#bottom,
#bottom button { background-color: #3D5B9B; }

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

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 center 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; }
 
Username font in the chat area (next to the messages):
.message-user-name { font-size: 20px; }
 
The username font in the user’s list:
.user-name { font-size: 20px; }
 
The font in the setting buttons:
#options-mobile li a span { font-size: 20px; }

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; }
.main-message-container::after {
border-left-color: #333333;
border-right-color: #333333;
}

9. Change the user’s list background color

Changing the user’s list background.
#list-frame { background-color: #183f07; }

 

Share Button