18 CSS chat tricks to style up your group chat room theme

Webmasters using RumbleTalk are often need to change their group chat room style (theme).
RumbleTalk admin panel, let you change any aspect of your group chat room, meaning changing fonts, borders, images background, user colors and much more.

Advance users: Web designers and developers, can use CSS techniques that will help them achieve their layout goals. The list of these techniques / tricks is an ever expanding one, however, the most common essential tricks that are essential can be found in this post.

Today, we will review 6 excellent css chat techniques to keep in mind when styling your group chat room theme.

In order to change your chat theme, you will need to login to Rumbletalk admin panel. Than you should choose the Advance Design button and click the CSS check-box.

Note that with Rumbletalk you can choose to use the advance design admin or the css option.
Moving back from CSS to the advanced design will not save your CSS changes.

1. Changing the default image of a guest user using css

User icon guest   You may change the guest user to any image by using your own image url.

.guest-default-image {
background: url(http://www.test.com/storage/usericon.png);
}

If you wish to hide the Guest user in the users list, use:

.user-image {
display: none !important;
}

2. Hide system messages such as “user left the chat room”

In large chat rooms with over 10 people talking, it is a bit annoying to see who is logged in and log-out during the conversation. Now you can remove these.

.system-message-text
{
clear:both;
margin-bottom:3px;
display: none;
}

3. Hiding all the buttons in the chat

If you wish your users to see no buttons, you may hide them using:

#options { display: none !important; }

4. Hiding only one button

Sometimes you might wish to hide one button.
Here is a list of all buttons and the way to hide them:

#options #pause { display: none !important;  }
#options #export { display: none !important; }
#options #popup { display: none !important; }
#options #sound { display: none !important; }
#options #opts { display: none !important; }
#options #logout { display: none !important; }

* This feature that clear the chat screen (not deleting) is hidden by default.
#options #clear { display: inline-block !important; }

5. Hide the “Invite friends” Icon

  This is a simple way to hide the ability to invite friends to the chat.
Add the next code to the bottom of your CSS and save:

Can now be done in chat settings -> Login -> Show “Invite Friends” button.

6. Change ADMIN Color

When you wish that your administrator “Sayings” to be colored differently (in another color). You can simply add this at the end of the css settings and change the color to your liking.

In the chat:

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

In the list:

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

By default the admin color is red.

7. Hide Viewers and Listeners

When you do not want to show the amount of users logged-in or just viewing the group chat room.
You may add this code:

#info-row div
{
display:none;
padding-right:5px;
}

In some designs you may use this one instead:

#info td
{
display:none;
}

8. Hide Facebook buttons (new)

When you do not want to show the Facebook buttons in the private chat page.

You may add this code:

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

9. Hide the dates on each line

When you do not want to show the date and time next to each line of text.

You may add this code:

.message-date{display:none;}

10. Change user icon size in the user list

When you wish to change the size of a user icon in the users list.

You may add this code:

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

11. Change user icon size in the chat area

When you wish to change the size of a user icon in the chat area.

You may add this code:

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

12. Hide user icon in the user list

When you wish to hide the user icon in the users list.

You may add this code:

.user-image { display: none; }

13. Hide user icon in the chat area

When you wish to change the size of a user icon in the chat area.

You may add this code:

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

14. Change the Guest text in the login button.

When you wish to change the text on the button of the guest login.

You may add this code:

#login-guest span {
color: rgba(0, 0, 0, 0) !important;
position: relative;
}
#login-guest span:after {
content: ‘new name’;
position: relative;
color: #000;
left: -20px;
}

* “new name” is the word that will replace “guest”
* “#000” is the color of the word; in this instance, i think he wants it black (#000)
* “-20px” is the relative horizontal location of the “new name”. Play with this value until the word sits in the center “new name”

15. Remove the Guest name in the private chat message.

When you wish to remove the guest name from the private message screen.

You may add this code:

​#user-info label:nth-child(6),
#user-info span:nth-child(7){ display: none; }​

16. Change the emoticons to your own

To change the emoji’s, you need to use the CSS option in the Advanced design and add the following code for each emoji:
    width: 0 !important;
    padding-right: 30px;
    background-image: url(“//www.exampleurl.com/smile2.gif“);
    height: 30px;
}
Where the number 10 represent one of the emoticons (from 1 to 30)
And the URL, www.exampleurl.com/smile2.gif represent the image you want to replace with.

 

17. Change the text type of your chat area

To change the text in the chat room to be thicker with black border, use this code.
.message-text{
color:#fff;
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
font-weight: bold;
}

18. Change the user name text type of your chat area

To change the text in the chat room to be thicker with black border, use this code.
.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;
}
html css text style
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