27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE)

Controlling your chat design using chat CSS is easy with our advanced design features.

RumbleTalk sets itself ahead of the competition by being the most customizable group chatroom available on the market.

A lot of our customization features are built into our settings menu, making this customization available to anyone at any tech-literate level, and or CSS experts, RumbleTalk group chat can be completely transformed.

But not everyone knows CSS, so we’ve put together this list of easy chat CSS tricks that anyone can copy and paste into the advanced design tab of their RumbleTalk account to get the benefits of a fully customized group chat room.  (Note, for the mobile version, we have other CSS tricks).

All you have to do is:

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

Group Chat Css tricks

In this post, we’ll cover the following chat CSS tricks:

User Icons – Chat CSS tricks

  1. Change the default guest user icon image
  2. Change the user icon size in the user list
  3. Change the user icon size in the chat area
  4. Hide the user icons in the user list
  5. Hide the user icons in the chat area

Functions – Chat CSS tricks

  1. Hide system messages
  2. Hide message date & time
  3. Hide all option buttons
  4. Hide specific option buttons
  5. Insert a clear chat area button
  6. Hide the number of viewers and listeners
  7. Hide the “Go To Facebook Profile” button
  8. Change the emojis

Text – Chat CSS tricks

  1. Change group chat administrators text color
  2. Change the text displayed in the guest login button
  3. Remove the login type label from the user profile
  4. Add borders to the username text
  5. Add borders to the message text
  6. Add an element above the chat in full screen
  7. Hide the QR box
  8. Add closing icon to the floating bouncing icon
  9. Remove the fields image and description in the register
  10. Set max image size in a chat
  11. Set max YouTube size in a chat
  12. Hide Twitter Link in Users Profile
  13. Disable group chat and allow only private chats
  14. Hide scrolling for non-moderators


1. Change the default guest user icon image

You can change the guest user icon to any image by inserting the
image URL into the following code.
.guest-default-image {
background: url("https://www.test.com/storage/usericon.png");

Group Chat Custom Avatars

2. Change the user icon size in the user list

.user-image {
width: 16px;
height: 16px;

large custom user icons

3. Change the user icon size in the chat area

.message-user-image {
width: 16px;
height: 16px;

large user icons

4. Hide the user icons in the user list

.user-image { display: none; }

hide user icons in group chat

5. Hide the user icons in the chat area

.message-user-image { display: none; }

hide chat user icons

Note, if you like to remove the white tooltip next to each message, you can use this code
.main-message-container::after { content: none; }

6. Hide system messages

System messages such as “user joined the conversation” and “user
left the conversation” appear in the group chat area.

.system-message-text { display: none; }

system messages can be turned off

7. Hide message date & time

Each message by default will be stamped with the date and time it
was sent. Use this code to remove this feature.

.message-date { display: none; }

group chat time stamps

8. Hide all option buttons

#options { display: none !important; }

Hide Buttons

9. Hide specific option buttons

Choose the buttons you want to hide. Each of these lines of code
can be copied and pasted individually.

.options-dialog .export {
display: none !important;
export chat transcript
.options-dialog .popup {
display: none !important;
chat fullscreen
.options-dialog .toggle-sound {
display: none;
chat menu

.options-dialog .qr-option { display: none !important; }

qr code

.options-dialog .logout { display: none !important; }

/* This option only applies to mobile */

logout mobile

.options-dialog .toggle-private {
display: none;
chat menu

.options-dialog .font-size {
display: none;
chat menu

.options-dialog .admin-mode-switch {
display: none !important;

/* This option can only be applied by admins */chat tool

.options-dialog .clear-messages {
display: none !important;

/* This option can only be applied by admins. */clear chat messages

10. Insert a clear chat area button

By default, the clear all button is hidden. Insert this button if you
want to have the option to clear all options without deleting them.

#options #clear { display: inline-block !important; }Group Chat Clear All Button

11. Hide the number of viewers and listeners

By default, the number of viewers and listeners is displayed in the
chat. Add this code to remove it.

#info { display: none !important; }

Group Chat Audience

12. Hide the “Go to Facebook Profile” button

When a user uses Facebook to log into the chat, a button will by
default appear in their group chat profile for others to go to their
Facebook profile. Use this code to remove that option.

#user-info .facebook-button { display: none !important;}

Facebook Profile Button

No Facebook Profile Button

13. Change the emojis

Use the following code for each emoji, where the number 10 represents one of the emojis (from 1 to 33, excluding 6), and the URL represents the image you want to replace it with.

.smiley-10 {
width: 0 !important;
padding-right: 30px;
background-image: url("https//www.exampleurl.com/smile2.gif");
height: 30px;

Customize Group Chat Emoji's

14. Change group chat administrators text color

Set yourself apart as the group chat administrator by changing the
color of your username and message text. By default the color is red.

Group Chat Administrator

In the user list

.admin .user-name { color: orange; }

In the group chat

.admin .message-user-name { color: orange; }

15. Change the text displayed in the guest login button

Replace the text “new name” but be certain to leave the (‘) marks
around it.

“color: #000” is the color of the text. In this case, the text will
be black. You can change this with any hex code.

“-20px” is the relative horizontal location of the text. Play with
this value until the text sits in the center.

#login-guest span {
color: transparent !important;
position: relative;
#login-guest span:after {
content: 'Join Us!';
position: relative;
color: #fff;
left: -20px;

Custom Guest Login Text

16. Remove the login type label from the user profile

.login-type { display: none; }

Group Chat Login Option

17. Add borders to the username text

This code will add black and bold borders to the usernames in the chat message area.

font-weight: bold;
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;

Bold User Names

18. Add borders to the message text

This code will add black and bold borders to the text in the chat area.

text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
font-weight: bold;

Bold Message Text

19. Add an element above the chat in full screen

Many ask us how I can add a player on top of the chat area?
The following code will be added to your HTML (not on RumbleTalk css area) in full screen.

<inner element height> - the height of the extra element
#wrapper { height: 100%; }
#extra-element {
width: 100%;
height: <inner element height>;
padding: 0px;
#chat-wrapper {
position: relative;
width: 100%;
height: 100%;
<chat-iframe> {
max-height: calc(100% - <inner element height>);
<div id="wrapper">
<div id="extra-element">THE CODE YOU WANT TO BE ON TOP OF THE PAGE </div>
<div id="chat-wrapper">THE CHAT CODE</div>

add external player on top of your chat.

20. Hide the QR box

When you want to hide the QR option in your chat.

QR code

To remove the button, add the following:

.options-dialog .qr-option { display: none !important; }

To keep the button for chat moderators only, add the following:

.moderator #options #opts { display: list-item; }

21. Add closing icon to the floating bouncing icon

If you want to add a closing icon to the floating icon. You can add this code and make sure you change the hash code (in red).
var hash = 'YOUR_HASH',

handle = setInterval(
function () {
if (
!window.RumbleTalkChat ||
!window.RumbleTalkChat[hash] ||
) {

if (hash == 'YOUR_HASH') {
throw new Error('Someone forgot to replace the place holder "YOUR_HASH" with your chat\'s hash');

var img = new Image();
img.src = 'https://d241b8qep9dzid.cloudfront.net/20190625083406/italic.png';
img.style.cursor = 'pointer';
img.style.position = 'absolute';
img.style.bottom = 0;
img.style.right = 0;
img.onclick = function () {



22. Remove the fields image and description in the register dialog box

Remove the fields image and description from the registration form.
.register-login-dialog form .row:nth-child(n+4) {
display: none;

23. Set max image size in a chat

Add maximum size of an image added to the chat conversation. Clicking on a small image will open it in the original size.
.message-text a img {
max-width: 200px !important;
max-height: 200px;

24. Set max YouTube size in a chat

Add maximum size of a YouTube video in a chat. Clicking on a small image will open it in the original size.

.message-text .youtubeWrapper {
max-width: 300px !important;
max-height: 300px;
  padding: 0;
height: auto;
.youtubeWrapper > iframe {
height: auto;
position: static;


25. Hide Twitter Link in Users Profile

Hide Twitter Link in Users Profile (when clicking on the gear icon in the private chat ).
.twitter-button {
display: none;

26. Disable group chat and allow only private chats

If you want to allow only private chat discussion so all can talk in private but not having a group discussion than choose a chat type “Group chat”, and then add the following CSS to both the web and mobile CSS versions.
{ display: none !important; }

27. Hide scrolling for non-moderators

If you want to prevent the scrolling of the chat message area – which will prevent regular users from accessing old messages, add the following CSS code to both the web and mobile CSS versions:

body:not(.moderator) #chat {
overflow-y: hidden;

Private Group Chat for Traders and Financial Experts

sMany of the financial experts of today seek a way to share and profit from their knowledge. As a service provider of a group chat, we see a steady increase in the number of clients from the financial sector using the benefit of a group chat application on their websites.

In some scenarios, forex traders, day traders, stock traders, and social traders are using RumbleTalk to share insights and information among peers. In other cases, we are using the system with the help of financial experts to hold digital panel discussions.

The applications of group chat for financial experts are varied, but the reasons it is used are consistent. This post will discuss the features that make RumbleTalk a trusted choice for online discussions among financial experts and institutions.

financial expert chat room


The number one concern for using any digital tools is security. When the information you share is sensitive (as in the case with banking, trading and so forth) digital managers want to ensure that their information is not susceptible to hackers.

RumbleTalk has encrypted its group chat rooms with end-to-end SSL/TLS technology. It means, that Messages and files are being send through a RumbleTalk group chat are not exposed to malicious systems that “listen in” on data transfers.

Need a video call option?
Well, when you need one of the two, audio or video call (we use WebRTC for a live call), you can trust that our encryption protects your information from being transferred.

Necessary Tools for Financial Experts

While the core purpose of RumbleTalk is to connect communities through online chat, including tools to make the conversation more productive is key to being the best choice for financial experts.

RumbleTalk includes tools for easy file sharing, embedding videos and images, recording audio, and sending audio and video calls. These features allow financial organizations to include a deeper context to their online group chats without having to send their users to their email to look find a document.

group chat room for financial experts

The most important use of these tools is when traders upload technical analytic graphs from their computer or send voice messages to the group. By sharing these and other excel files, charts, instructional videos and more, financial experts are able to use RumbleTalk for collaboration, training, and more.


RumbleTalk truly excels at being the most flexible group chat option available. Financial experts have many options for using group chat.

Among the most popular installation types, is the option to embed the group chat directly into a website. You can see an example of this by visiting the RumbleTalk demo. One RumbleTalk group chat can be embedded in as many pages and websites as necessary.

Another option is to leave the group chat off a website and access it with a provided URL. Anyone with the URL has the opportunity to log in and join the chat.

Part of RumbleTalk’s flexibility is its ability to choose who can participate. For some financial experts, online group chat is a tool to hold public discussions, while others use it for exchanging private information among each other. In either case, we configure the chat to limit or expand who can participate.

Ease of Use

Finally, our customers keep on choosing RumbleTalk. This is because of how simple it is to create, set-up, and use. To get your first group chat room, all that is required is an email address and password. This opens an account and automatically generates a live chat room that is ready to use.

Customize your chat to include your logo and match the color theme of your website. We built the option to set it up in the admin panel or by using CSS code.

For groups that need more than one group chat room, a new chat can be generated with one click.

Every group chat room comes with a line of HTML code. Grab this code and place it on any website html page. The group chat room is designed to be responsive. Responsive means that it will consume all the space given to him. This makes it easy for customers adding it to any page.

And of course, RumbleTalk isn’t just easy to use for administrators; We worked hard to make the service (platform) a mobile-friendly. Including features and an intuitive design to be convenient for your users too.

All of this comes with the reliability of RumbleTalk’s infrastructure and customer support.  It does not matter where you are or what issues your facing, we are here and able to solve problems to keep you chatting.

Chat Compare, The difference between “Group Chat” “Live Chat” and a “Chat Room”

After several support emails with the same subject? asking us to explain the difference between chat software vs group chat vs live chat vs chat room. We decided to elaborate it a bit.

According to Merriam-Webster Dictionary, chat is defined as  “to talk with someone in a casual way” and also “to talk over the Internet by sending messages back and forth in a chat room.”

Let’s try to understand the different options in the chat arena?

It is a matter of terminology but much more. For example, if you need a public chatroom that allows you to log in using your social media credentials, then a private room will not be suitable for your needs.

RumbleTalk chat for private and public rooms

Let’s talk about chat compare, The difference between the next 3 options
A – Group Chat
B – Live Chat
C – Chat Room

Note, each of those can be shown in two forms, chat software, or chat service.
The main difference is that a chat software will be installed on your server using your CPU, memory and other resources from your servers. A chat service is a chat that will show on your website but will consume the vendor of the chat resources (e.g, will not affect your server performance).

So, let’s start

The Evolution of Chat in Computer System

Our needs to communicate with other human being had initiated a chat system to be built along with the first computer operating system, UNIX in 1970’s. Talk program was built into UNIX system to allow people communicate each other using their user name as ID. Talk program only allows one-on-one chat.

The very first multi-user and chat room is a program called Talkomatic. The program was invented for the first time in 1973 by Doug Brown and David Wolley in University of Illinois as supporting tools for the University’s learning system.

Chatting has been so common in our daily Internet life. We are now using many different chat program and connecting with people around the world, as a chat program chat has been advancing very much since the very first talk program in UNIX system.

1. Chat, Instant Messaging and SMS

We have been so useful with chatting program. As a communication system has evolved and so has the chat program evolved. Chat by definition, according to PC Magazine is a real-time communication via keyboard between two or more users on a local network (LAN) or over the Internet.

Webopedia, the online tech dictionary also define chat as the same definition as PC Magazine: a real-time communication between two users via computer. Once a chat has been initiated, either user can enter text by typing on the keyboard and the entered text will appear on the other user’s monitor.

Most chat system nowadays allows users logging in to the system to enter a chat room and chatting with other people who have already been in the room. This allows a many-to-many chat room, as everyone in the chat room can send their message to other people.

There is a different term regarding chat, but actually, it means the same. The term Instant Messaging for most often is separated from chat, but instant messaging is actually a chat in itself.  The difference between chat and instant messaging is that instant messaging is built to focus on the one-on-one chat.

In a mobile application, we have now so many instant messaging application. In the cellular technology, the very first instant messaging app is SMS. This technology then evolves into more advanced technology in mobile instant messaging. As the smartphone revolutionize the computing industry in the 2010’s, SMS has been replaced by the variety of instant messaging app.

Group Chat - Chat Room

As smartphone technology now converges with Internet and web technology, the chat must be able to deal with the convergence. The challenge for today’s chat technology is to be able to run and synchronize on both PC and mobile device. Fortunately, today’s technology enables us to build a web chat software that can be used in either mobile device such as smartphones and tablets, as well as PCs (HTML5 + Javascript).

2. The 3 types of chats

In the chat arena, we know there are three types of chat:

  • Private Group Chat
  • Live Chat
  • Chat Room

Private Group Chat. As the name depicted, the private chat room was meant to be a private conversation between a selected people. Usually, a small team needs this chat. Such as a group of stocks trader, a real estate sales associate, and small groups need this chat room.

Private chat compare to Social chat
With RumbleTalk you have the option to shift from private to social/group chat on the fly

One common needs for private group chat is the capability to share files. It is because the people in the private group chat usually are people with the same profession or the same interest. Therefore, the chat room is also functioned as a knowledge sharing tools. With the file sharing, capabilities, they can share any kind of files for information and knowledge sharing needs.

One additional advantage for teams is the fact that a user can enter when he has time and scroll up to see the group chat compare history, it is a huge time saver when managing groups.

Live Chat. This is the type used for customer service. A customer can be assisted by a company representative, who usually handle more than one visitor at a time. Companies with customer-oriented product and service, especially retail or FMCG company will surely need this chat. Live chat is useful as the supplement for telephone contact center.

Moreover, a company with an Internet-related product will need this live chat more than phone support. Since most customers are connected to the Internet, live chat is the most appropriate customer contact for such company.

Chat Room. This is the most common chat type and resembles a public space where people can talk to anonymous chatters. The public room can be placed on any website in any area of the site as long as the chat room is a public chat room.

When we enter the public chat room, we can see how many people have already been in the room and we can join the conversation with those people. In these chat room, usually, a conversation can be so hectic. However, we can also switch to private chat mode by inviting someone to a private room and chat privately. A good chat room will have this mode switching.

3. Chat Compare – Table of Comparison Between the Three

Features Private Group Chat Live Chat Chat Room
Public No Yes Yes
Switch to other types Yes No Yes
Moderated Yes No Somewhat
File sharing Yes No Somewhat
Image insertion Yes Somewhat Yes
Video Call Yes No Yes
Audio Call Yes Somewhat Yes
Emoticon Yes Somewhat Yes

4. Why Is It  So Confusing?
The complexity of human communication makes our communication method is different from one another. This also applies to the Internet communication, that is the reason for so many different chats compare available. All of them have a specific purpose and cater specific chatting need.

We can select the most suitable chat for our conversation needs.