New Feature: Customize your Mobile Chat using CSS

mobile chat css

Since we launched RumbleTalk html chat service for websites. We tried to give our customers a full control over their html chat room look and feel. The service was build as a JavaScript chat on the client side with light HTML5 and CSS.

When we started RumbleTalk, we created an “Advance design” feature, were people could change colors, background, borders, fonts, font size and more.

However after a while, we understood that for advanced users and web desingers, this was simply not enough. The requests for additional customization options came too often. So we decided to add the option to let customers design the entire html chat room look and feel using CSS. It meant back than that users will control any aspect of the chat design simply by letting them control over the CSS.

Web Design
Web Style Web Chat Design

In the example image above, we loaded new background using css. This is basically what a customer sees when he/she are using PC or laptop (using a web browser).

This was a big boost for RumbleTalk as web designers and website developers started to design special customized html chat room skins. It was a unique fresh approach for designer that let them actually, design. It also meant that they could avoid using an off the shelf flash like chat rooms software that always look strange with respect to their website design.

One more important point, web designers had the option now to design the chat room for customers with the exact look & feel of their website without compromising on the quality and look and feel. This made RumbleTalk very popular with web designer that expressed them self’s easily and were not forced to use a 3rd party chat software that have none or very limited customization options.

Mobile, here we come

When we were done with the Web CSS feature (Control the chat design for web browsers). We understood that the work is not finished. We knew that in order of giving a complete 360 degree solution, we will need to allow customers to change their mobile chat CSS as well.

We are happy to announce that this feature is now released. Yehaaaaee √√√

So, mobile css feature was launched last week. You can now create and customize your mobile chat design. Note, we gave some technical css tips in here to help you start the process of changing the most common items that customers often ask us about.

Quick Example of CSS design option.

To explain it better, let me start with the original idea, RumbleTalk comes with a default mobile theme that was not editable till now.

You may see below how we transform in 3 steps from the default mobile theme to a custom chat room theme.

mobile chat CSS design for websites

So, what do you see here in this example above ?

  1. First you see on the left, the default design that is part of every chat room created.
  2. Than we loaded up the same background we had in the web chat design.
    See here the line we added.#chat { background: url(“”) no-repeat scroll left center; }
  3. Than we changed the header and foot { background-color: #0373d1 !important; }
    #bottom { background-color: #0373d1 !important; }
  4. At last we increased the font size to 20px.#chat { font-size: 20px !important; }

Customize your Mobile Chat

admin panel mobile css design

Changing your mobile css is done in the advanced design menu, in a new tab called Mobile CSS.
You can control all the design aspects of the chat, mainly used to customize your mobile chat looks but also can help in adding functionality (limited though).

The most common request that we get from clients for mobile customization are:


  • Changing the Top Bottom Bar color
  • Changing the chat background color


  • Changing the Fonts size

Admin User

  • Changing the ADMIN image
  • Changing the ADMIN text color
  • Changing the default image of a guest user using css


Share Button

5 CSS tricks to style up your mobile group chat theme

Mobile css design for group chat

Many customers design their own chat room theme using CSS. Lately we introduced a new feature that allow customer to design also their mobile group chat theme using CSS.

Using CSS adjustment is an advance feature that is available for customers with css knowledge.

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 Mobile CSS tab.

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

User icon guest   You may change the default guest user for your mobile group chat to any image by using your own image url.

.message-user-image {
width: 0 !important;
padding-right: 32px;
background-image: url(“//”);
background-repeat: no-repeat;

user image change via css

2. Changing the ADMIN image

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

.admin .user-image,
.admin .message-user-image {
background-image: url(“//”);

2. Changing the ADMIN text color

You may change the default ADMIN text color.

.admin .message-user-name,
.admin .user-name {
color: #2DA8E0 !important;

3. Changing the Top Bottom Bar color

You may change the color on the header and footer area of your mobile chat.

.top-bar { background-color: #3D5B9B !important; }
#bottom { background-color: #3D5B9B !important; }

header and footer color change

4. Changing the chat background color

You may change the chat background from white to any color you want.

#chat { background-color: #607D8B !important; }

5. Load background image

You may load any image as your mobile chat background.

#chat { background: url(“//”) no-repeat scroll left center; }

change chat background color

6. Change Fonts size

You may change the size of the font to your own liking.

Font of the messages a users send:
#chat { font-size: 20px !important; }
User name font in the chat area (next to the messages):
.message-user-name { font-size: 20px !important; }
The user name font in the users list:
.user-name { font-size: 20px !important; }
Font in the setting buttons:
#options-dd li a span { font-size: 20px !important; }
Share Button

Business Chat Room is the Most Effective way for Internal Communication

Business chat room

An office is an hectic place. No so long ago, if you needed to talk to someone in another room, you simply went to the other room and talk to the other person. Than latter on you used a phone call and recently in the past decade you send email or send text messages. Than mobile apps came along and the options were unbelievable.

I remember that my colleague were just sitting in-front of me and when I was hungry, I sent them an email with the question “Lunch?“. The reply was “In 5 minutes“. This approach was fine for making a decision for going together to lunch, but when communication involve a group, it get complicated.

Now, we have tons of options to communicate this days like iMessage, Skype, Google Talk and Twitter direct messages. Each have their own usage and you can get business done with them just as much as with a professional business chat app.

A business chat room app is making teams more efficient and combine the communication between the different groups. It gives extra value if :

  • The team seats in different locations, different floors or even different countries.
  • There is time differences between the team members.
  • A company needs to make internal communications richer than emails with attachments, simpler than sending a text, and as easy to search through as your Evernote notebooks.

Check if you need an HTML Business Chat for your Team?

Of course, No one needs to be yelling from office to office, or send a lot of emails with many CC’s and attachments. It’s basically a lost of valuable time. Here are the things you can use a group business chat for.

Share Files and Documents

Working with a team requires a lot of documents sharing. It is important that one can upload his own files and share with his group. The group chat must have an option to share videos and images directly in the business chat (not as a file).

When one upload a file it is automaticly detected and presented as attachment or as inline image. For example, if one upload a word document, it will show as a word icon. While when uploading a youtube video, it will show in the chat with a play icon.

Send Short Audio Messages

Record short audio messages to the team, can be very helpful when sent to the group. This can be done by clicking on the attach icon and clicking on the record audio icon.

Live Video Calls Between Chat Members

Live Video and Audio calls is needed for private conversation between two members of the group.

Private chats

Some time we will need to talk in private with one member of the group. We can use the old concept of private text messages done by clicking on the user name that we wish to talk to.


Team chat can be customized to your own liking. So design one that looks good and prefer the ones that let you do it using CSS.

See how it will look like :


Pricing is not something a company can ignore. If group chat is needed and the benefits are clear, there are many that offer group business chat for teams. Choose the most attractive one for your team.

Share Button