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:
- Copy the CSS code you find suitable from this post.
- Log into your RumbleTalk admin panel.
- In the chat settings, under “Design”, click on “Add CSS for Mobile Browsers”.
- Paste your code and close the box.
learn more about CSS tricks here
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
You may change the default guest user for your mobile group chat to any image by using your own image URL.
#list > div:not(.admin) .user-image,
.main-message-container:not(.admin) .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;
}
2. Changing the ADMIN image
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 of 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; }
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 the 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; }
6. Change Fonts size
You may change the size of the font to your own liking.
#chat { font-size: 20px; }.message-user-name { font-size: 20px; }.user-name { font-size: 20px; }#options-mobile li a span { font-size: 20px; }7. Hide Buttons in the chat menu
You may hide buttons in the mobile menu view.
Hide Full-Screen button.options-dialog .popup {
display: none !important;
}
Hide QR code button.options-dialog .qr-option {
display: none !important;
}
Hide font size buttons
.options-dialog .font-size {
display: none;
}
Hide pin the position button.pin-li { display: none; }
Hide sound on/off button.options-dialog .toggle-sound {
display: none;
}
Hide logout button.options-dialog .logout {
display: none !important;
}
Hide export transcript button
.options-dialog .export {
display: none !important;
}
8. Change Message Background Color
Changing the message background color includes, changing the background, changing the text color and changing the tip of 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; }
Admin-only CSS tricks
10. Removing the admin mode option from the chat menu
This will remove the admin mode option.
.options-dialog .admin-mode-switch {
display: none;
}
11. Removing the option to delete chat messages from the chat menu
This will remove the option to delete chat messages.
.options-dialog .clear-messages { display: none !important; }