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::before,
.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.

.message-user-name{
font-weight: bold;
color:rgba(0,150,245,1.00);
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.

.message-text{
color:#fff;
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.

<style>
<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>);
}
</style>
<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>
</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).
(function(){
var hash = 'YOUR_HASH',
handle;


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


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


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 () {
window.RumbleTalkChat[hash].mainDiv.parentNode.removeChild(window.RumbleTalkChat[hash].mainDiv);
};


window.RumbleTalkChat[hash].mainDiv.appendChild(img);
},
100
);


}());

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.
#content,
#text:not([readonly]),
#chat-extra,
#send-button
{ 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;
}

It is Totally Possible to Customize a Group Chat

Before we started RumbleTalk, we had a community website for web designers. With a large and growing number of members, we wanted to add a way to allow the group to instantly engage with us and with each other. We thought that a chat room would work.
We looked extensively for a good, well designed chat that our design-centric customers would appreciate and could easily be added to our website.

One major factor in our research was our need to customize the chat, really customize it. We needed to be able to change not only the chat colors, but also the borders, line thickness, chat background image, fonts and more. With these standards, we did not find any service or downloadable chat software to satisfy our criteria.

We could not find anything suitable for our needs and…mmmm…well, it looked awful. What we found were a variety of Flash chat rooms that appeared out of date, were not mobile friendly and had very few options to customize. We tried one or two services but the result was that it always looked like someone forced an unrelated chat room design with an irrelevant chat background into our nice looking, well designed community website.

This is what initiated the creation of RumbleTalk group chat service. Our vision was to give website owners the ability to completely customize a group chat room to fit their website. We wanted site owners to be able to easily create and embed chats, customize it up to match their website design, control when it was on or offline, moderate, and more.

With this in mind, a great team, and a lot of hard work, RumbleTalk was born.

Today, RumbleTalk has three major areas where users can customize their group chat: design, operation, and location. Each area has been thoroughly thought out and programmed with our customers in mind.

Design Customization

group chat room theme

Design is usually the first area of customization that people think of and is rightfully a critical element when deciding to use group chat in your website or not.

If the chat doesn’t look like it belongs there, the page will appear amateur and an amateur site makes it harder for your customers to build trust with your brand.

The RumbleTalk team deeply understands the importance of design (that is what prompted this company anyway) so we created three levels of design customization to make it easy for anyone at any tech-literate level to get the group chat they want.

Theme Library

Our designers have put together a robust theme library for RumbleTalk customers to simply click to customize. Our themes range from simple to intricate. Some have plain color backgrounds, others have images, and some have transparent backgrounds. These themes can be changed on the spot, so even during a conversation the design can be changed without hassle.

rumbletalk theme library

And if you can’t find a theme that is exactly what you want, you can always use it as a starting point and tweak it in the advanced design panel rather than starting from scratch.

Advanced Design

RumbleTalk group chat designs can always be changed, tweaked, modified and perfected with the advanced design option. Under the advanced design tab, you can change everything from colors, fonts, borders, dimensions, and the chat background.

advanced design group chat settings

One highly beneficial use of this is uploading your own image or logo as the chat background. This is one of the best ways to make the chat conform to your website.

CSS

For those who have a working knowledge of CSS, we have included the ability to input your own CSS code. This means that a CSS expert can truly transform a RumbleTalk group chat to look amazing while still retaining the efficiency of the RumbleTalk software.

And even if you don’t know CSS, we put together a collection of CSS tricks that are easy to copy and paste.

css group chat room

And, CSS customization can be used for both the web and mobile versions of the RumbleTalk group chat.

Operational Customization

While design customization is crucial, the operational customization can be just as important.

What do I mean by operational customization?

These are the type of settings that determine if your chat is:

  • Public or private
  • Online or offline
  • Archived or forgotten

And much, much, more!

Take a closer look.

Custom Language

Online communities and chatters exist all over the world so a truly customizable chat should be capable of changing languages. RumbleTalk group chat languages can be customized in different ways.

The chat interface is written in English, but can be changed to one of 36 languages and counting. And if your preferred language isn’t shown, you can email us a translation and we will set it up for you.

English France (Français) Spanish (Español) German (Deutsch)
Bahasa Indonesia Bahasa melayu Bosanski Català
Czech Dansk sprog Euskara Hrvatski
Italiano Magyar Nederlands Polski
Português Română Slovenčina Suomi
Svenska Tiếng Việt Türkçe ελληνικά
Български Македонски Русский язык Србски
Українська עברית عربي فارسی
ภาษาไทย 中文 한국어 Estonian

Beyond the chat interface, you’ll want to have the ability to change what language is accepted into the conversation. There’s no restrictions here. Your community can input whatever language they want and a RumbleTalk chat will recognize and display it.

Sometimes, a group chat owner will want to filter out certain unwanted word. RumbleTalk also has a filter-word setting where you can decide what words will automatically be filtered by the RumbleTalk software so that they do not appear in the chat. This setting is especially useful when the group chat is used by children and educational settings.

Custom Audience

Customizing your audience is an essential element to customizing a group chat.

In some situations, a chat owner will want to open the conversation to the entire world and get the largest audience possible. Other times, a chat owner will want to reserve the benefits of the conversation for those in an exclusive organization.

RumbleTalk gives group chat owners the ability to make their group chats private or public. This extends even as far as allowing site visitors the ability to view, but not participate in, the conversation without logging in.

Of course, the group chat can be configured to be totally public, but in some cases group chats are used for private meetings or confidential information sharing. In this case, a user list can be set up to only allow specific individuals to enter or view.

Organizations with an existing user base can link this information to their RumbleTalk group chat allowing their login to their site account to automatically log them in to the group chat and populate their profile details. This API integration can make a huge difference to established communities!

Internet trolls are an unfortunate reality and a bothersome audience. Adding one more level to the custom audience, you can choose who is a moderator or chat administrator and they can choose who is not allowed in the conversation. By banning users by IP, you can prevent trolls from logging in under different aliases on the same computer. This customization is most appreciated when it is absolutely necessary.

And when you don’t want an audience at all, a RumbleTalk group chat can be taken completely offline.

Custom Security

Online security is a big deal. You want your community to trust that you take their security seriously, and you want to know that your group chat provider takes your security seriously. This is why RumbleTalk can be enabled with HTTPS TLS/SSL security. By enabling this feature, chats are encrypted and can’t be “listened” to by unwanted hackers.

Most RumbleTalk users like having the ability to export their chat transcript or keep it archived on the RumbleTalk cloud, but others would prefer no record of their conversation at all. This customization can either be a valuable archiving feature or an extra step to secure trade secrets are not stolen. Further in this customization, a RumbleTalk group chat owner can determine if users are able to see the chat history or not.

Within the group chat room, users designated as chat administrators are able to act as a moderating security force and have the authority to delete inappropriate messages, kick out abusive users and ban the users that violate community conduct rules.

Location Customization

Location customization refers to where your community is directed to access the group chat room.

A lot of group chat services want you and your community to log into their website to be able to chat.

But not RumbleTalk.

Instead, a RumbleTalk group chat room has several options for you to set up shop. This could be on your website, Facebook page, or even as an independent URL. In any case, you won’t have to send your community away in an attempt to bring them together, because that just doesn’t make sense.

Group Chat in Your Website

After you have customized your group chat to match your site, you’ll want to embed it. This sounds like a complex thing to do, but we’ve made it easy.

A RumbleTalk group chat comes with a single line of code that opens a window to your group chat. So, all you have to do is copy and paste this code into a page and the chat room will embed. Because we’ve made it dynamic, the group chat will take up the space you give it meaning you won’t have to toggle the pixels width and height.

However, embedding a chat isn’t the answer for every website so we also created a floating icon to open the chat on top of your content. You can see an example on our homepage. A chat icon sits in the bottom left or right corner of your page and is clicked to open the chat and clicked to minimize it while you’re browsing.

Group Chat on Your Facebook Page

Another way to customize your group chat is by choosing to include it on your Facebook page. Doing so is as simple as logging in to your Facebook.

If your community operates solely on the Facebook or if your Facebook page supports a website, you can still include a group chat feature to connect your audience. Group chat offers an instantaneous way for members to interact with each other rather than the standard commenting platform Facebook provides. And if you want to connect your Facebook audience with your website audience, this is a great way to bring them into the same room.

Group Chat URL

Not everyone has a website or Facebook page, but that doesn’t mean you don’t want a customized group chat. A RumbleTalk group chat comes with a URL that opens the group chat in a new tab or window. This is great for one-time special events that need a group chat to foster dialog between participants.

Group Chat Plugins

For those whose sites are hosted, we’ve created plugins for the major platforms including:

  • WordPress
  • BBpress
  • BuddyPress
  • Joomla
  • Jimdo
  • Drupal
  • phpBB
  • Magento
  • Yola
  • Blogger
  • Wix
  • Squarespace
  • Tumblr

Each platform is a little different, but we took the extra step to make it easy for our customers.

Are You Ready to Customize a Group Chat?

Making it easy was a goal that we are proud to have accomplished.

RumbleTalk was created to give designers the ability to create a beautiful group chat room for their clients, but the more we worked on this project, the more potential we saw. Customizing a mobile friendly group chat room can improve a community’s member retention and add value to the community as a whole. It’s a worthy effort!

Group chat is now accessible not only to website owners but also to the communities they lead. Before RumbleTalk was so easy to incorporate in a website, a lot of communities had the problem of spreading their conversation thin between the various social media platforms. This caused some people to communicate on Facebook, while others were on Twitter, or Instagram, or whatever. With an embedded group chat, the community can stay on the website that brings them together in the first place and the conversations happens with everyone in the same “location”.

This article only covered the customization settings of RumbleTalk and in addition to these there are a ton of great features that make it easy to use and highly functional for your community. We built in tools like document sharing and video calls and everything in between.

We’re always improving our platform with these goals in mind. It’s a never ending project, but we truly strive to make the best group chat platform for communities.

Customize Your Chat Box Style With CSS

One of the most beautiful things in an HTML5 chat box is the ability to fully customize your own chat room. If you are a chat room administrator, you may choose a chat box theme from a variety of themes in your admin panel.

As an administrator, you have a full access to customize your chat box using simple admin panel actions. These options enable you to change the following:

  • Background color
  • Background image
  • Text color, size, and font

You can access the customize menu at the bottom of your dashboard. In there you will find settings. Click on it and you will have the customization page appear before you.

Admin panel chat box configuration

Now, let us try to customize our chat room box.
If you look at the customization page, you will find 7 customization designs for your chat box. The customization settings consist of 6 basic customizations and 2 advanced customizations using CSS.

Basic chat box customization

There are 6 basic components which you can customize accordingly. They are:

  • General & Background – provide general settings: layout, background, and text.
  • User List – enables you to customize the size of your user list, background, text, border and color with padding and margin.
  • Chat Area – for customizing text, border, and color with padding and margin in the chat box area
  • Message – border, background, padding, and margin.
  • Dialog Boxes – this is a setting to customize the popup message, enables you to customize background, border, along with padding and margin
  • TextBox – setting for the bottom text box, height, background, text, border, padding, margin

Please check the following guide for further explanation:
Changing background in your chat box

Advanced customization with CSS

Advanced CSS customization provides more control to customize your chat box. In the CSS customization, you will be required to have a knowledge of CSS.

There are two CSS customizations you can use for the chat room: CSS, for standard web chat (PC, laptop browsers) and mobile CSS for your chat box through mobile.

To change color appearance, you can use either a color-hex code or a RGBA (Red-Green-Blue-Alpha) value. For instance: a maroon color would use one of the following codes:
Color-hex #5a1414
or
RGBA (90, 20, 20, 100)

The following lists are the most common customization CSS parameters and their variable for changing appearance:

1- Changing icon and color of users

.guest-default-image
Function: Changing default image of guest users
Syntax:
.guest-default-image {
background: url(http://your_image_here);
}

.user-image
Function: Changing size of user icon in user list
Syntax:
.user-image {
width: 60px;
height: 60px;
}

.message-user-image
Function: Changing size of user icon in chat list
Syntax:
.message-user-image {
width: 24px;
height: 24px;
}

.user-image
Function: Hiding user icon in user list
Syntax:
.user-image {
display: none;
}

.message-user-image
Function: Hiding user icon in chat area
Syntax:
.message-user-image {
display: none;
}

.admin .message-user-name
Function: Changing admin color in the chat
Syntax:
.admin .message-user-name {
color: your_color;
}

.admin .user-name
Function: Changing admin color in the user list
Syntax:
.admin .user-name {
color: your_color;
}

2- Changing text in chat box area

.message-user-name
Function: Changing user name appearance in chat area
Syntax:
.message-user-name {
font-weight: bold;
color:rgba(90, 20, 20, 100);
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
}
The above will change your user name into bold maroon color.

.message-text
Function: Changing message text color in chat area
Syntax:
.message-text {
color:#3c5a78;
}
The above code will change your message text into blue text.

After customizing your chat room you can save the setting and see the result in your embedded chat box:
Chat box css for web chat

3- Some useful mobile CSS parameters

The following CSS parameters can be used for mobile chat when you access your chat box through your mobile devices such as smartphone or tablet.

Combination of .user-image and .message-user-image
Function: Changing default image of guest users
Syntax:
.user-image,
.message-user-image {
width: 0 !important;
padding-right: 32px;
background-image: url(“url_to_your_image_here”);
background-repeat: no-repeat;
}

Combination of .admin .user-image and .admin .message-user-image
Function: Changing default image of admin user
Syntax:
.admin .user-image,
.admin .message-user-image {
background-image: url(“url_to_your_image_here”);
}

.top-bar and .bottom
Function: color of top and bottom bar
Syntax:
.top-bar {
background-color: #5e2e2c!important;
}
.bottom {
background-color: #5e2e2c!important;
}

The above will change your top and bottom bar into a brown color. Find the result in your smartphone or tablet
chat box css for mobile chat

Its very simple to customize your chat room….
Now, you can play around and change your chat box appears to be as fancy as you want. This functionality will give you a totally different chat box to serve your purpose.