18 Easy CSS Tricks to Transform Your Group Chat Room

CSS 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

New Feature: Left Floating Group Chat

Floating Group Chat

We are happy to announce a new feature that lets users add their floating group chat on the left, in appose for being on the right. Till now the only option was to place the chat on the right. This was an issue for some customer and was communicated to us several times in the past months. The complain was: Adding a group chat on the right have some effect on the website design. For example, their right part was already occupied by other widgets or that a floating chat on their right is ruining their design.

The new feature is simply allowing the change of the chat size with a click on a radio button.

Floating Group Chat on the Left
Floating Group Chat on the Left

Changing the Floating Group Chat Side

In order to change your floating group chat to the left, you can now choose a side on the
Settings -> Floating tab.

The floating chat have additional features that one can enjoy.

– Set the height,width of the floating chat.
– Set the number of times the image will bounce up and down.
– Set a new image instead of the default, to show on the right bottom corner.

If you wish to understand the difference between a floating chat and an embed chat version.
Please look at this previous post.

Share Button

Case Study: Chat box features worth knowing

Lets talk about good design. Just before we start, lets clear up that RumbleTalk chat room service lets you design your own chat room style. This means that one may use the integrated options to design his own chat room. Add to it a creative mind and you can build amazing chat room designs.

dittytv chat room

Here is 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 appose 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.

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

Share Button