18 Easy CSS Tricks to Transform Your Group Chat Room

RumbleTalk sets itself ahead of the competition by being the most customizable group chat room 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 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.

All you have to do is:

  1. Copy the CSS code from this list
  2. Log into your RumbleTalk admin panel
  3. Paste the CSS code into the CSS tab under Advanced Design
  4. Click SAVE!

 

CSS Group Chat

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

User Icons

  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

  1. Hide system messages
  2. Hide message date & time stamps
  3. Hide all buttons
  4. Hide specific buttons
  5. Insert a clear all button
  6. Hide the number of viewers and listeners
  7. Hide Go To Facebook Profile button
  8. Change the emoji’s

Text

  1. Change group chat administrator text color
  2. Change the text displayed in the guest login button
  3. Remove login type from user profiles
  4. Add borders to the user name text
  5. Add borders to the message text

 

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("http://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

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 stamps

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 buttons

#options { display: none !important; }

Hide Buttons

9. Hide specific buttons

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

#options #pause { display: none; }
Group Chat Pause Button

#options #export { display: none; }
Export Group Chat History Button

#options #popup { display: none; }
Full Screen Group Chat

#options #sound { display: none; }
Group Chat Notification Button

#options #opts { display: none; }
Group Chat Settings Button

#options #logout { display: none; }

Group Chat Log Out Button

10. Insert a clear all 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 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 emoji’s

Use the following code for each emoji, where the number 10 represents one of the emoji’s (from one to 30), and the URL represents the image you want to replace it with.

[src=“//d1pfint8izqszg.cloudfront.net/images/smiles/yellow/s10.png“] {
width: 0 !important;
padding-right: 30px;
background-image: url(“//www.exampleurl.com/smile2.gif“);
height: 30px;
}

Customize Group Chat Emoji's

14. Change group chat administrator text color

Set yourself apart as the group chat administrator by changing the
color of your user name 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: 'new name';
position: relative;
color: #000;
left: -20px;
}

Custom Guest Login Text

16. Remove login type from user profiles

.login-type { display: none; }

Group Chat Login Option

17. Add borders to the user name text

This code will add black and bold borders to the user names 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

Share Button

Case Study: DittyTV using chat box features worth knowing

I know, this is a case study, but first let’s talk about good design. Just before we start, let’s clear up the fact that this is a design post about the ability to design your own chat box style. This means that one may use the various chat box features to integrate and design his own chat theme.

Deign chat box features

Here is an example of how simple to create a great design using the powerful tool that let you DIY. In general, there are 4 ways to design your own chat style.

  1. Chat Skins – choose from our pre-made chat room designs
  2. Chat advanced design – easy to create your own style via quick visual settings.
  3. Easy CSS  – this is for advanced designers. If you know CSS you can create your own custom chat room.
  4. Floating icon – if you choose to use a floating chat (in oppose to in-page embedded chat) you can also design your own icon style.

From time to time we see a great chat design made by capable people.
One that worth mentioning is the chat box designed in the dittytv  (American music television) website (see above). They use advanced CSS design in addition to designing their own floating icon. They choose to have a transparent background so the chat looks as part of the actual website design.

dittytv chat room

If you like the design, you can give them a like.

Share Button

Case Study: Customers Designing their own Tool-bar Chat Icon

RumbleTalk chat room can be added to a website or blog in 2 ways.

Embedded chat Room in a page

Add a chat room as part of the page, as can be seen in here

Tool-bar chat Room
A second option is  floating tool-bar chat room, which is the “jumping” green icon in our home page. Clicking on it will open the chat room for a group discussion.

Since we launched the ability to customize the chat room floating Icon 8 months ago, we saw that thousands of chat rooms used it to created their own style . Here are some examples from our customers.

      

Some chose to use small and delicate icons that are “jumping” up and down based on the floating chat settings.

      

Some chose to use a bigger versions of the floating chat icon.

          

Some used simple Icons without text .

     
If you want to set your own Icon with your own style, you can follow this quick steps.

Step 1: go to the admin panel –> in the chat settings section the new tab called, floating.
Step 2: Set your own icon and width, height and bounce rate.

Share Button