Customize your Chat Box Style with CSS

chat box css options

One most beautiful thing 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 a simple admin panel actions. This options enable you to change the following:

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

You can access the customize menu in the bottom of your Dashboard. In there you will find a Settings. Click on it and you now have 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 design for your chat box. The customization settings consist of 5 basic customization and 2 advanced customization using CSS.

Basic Chat Box Customization

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

  •  General & Background – provide general settings: layout, background and text.
  • User List – enable you to customize 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 chat box area
  • Message – border, background, padding and margin.
  • Dialog Boxes – this is a setting to customize a popup message, enable you to customize background, border, along with padding and margin
  • Text Box – 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

In the advanced customization, it 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 customization you can use for chat room: CSS, for standard web chat (pc, laptop browsers) and mobile CSS for your chat box through mobile.

In changing color appearance, you can use either hexa code for the color, or its RGBA (Red-Green-Blue-Alpha) value. For instance: For a maroon color, you can use the following code:
color: #5a1414
or
color: rgba(90, 20, 20, 100)

The following lists are the most common customization CSS parameter and its 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 text in chat area
Syntax:
.message-text {
color:#3c5a78;
}
The above code will change your text message 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 Parameter

The following CSS parameter 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 brown color. Find the result in your smartphone or tablet
chat box css for mobile chat

That’s very simple to customize your chat room….
Now, you can play around to change your chat box appearance as fancy as you want. This functionality will gives you a totally different chat box to serve your purpose.

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.

.user-image,
.message-user-image {
width: 0 !important;
padding-right: 32px;
background-image: url(“//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-blue.png”);
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(“//rumbletalk-images-upload.s3.amazonaws.com/cc244d13c0e7e7bb6c4b63830314dc61/1444667334-usericon-white.png”);
}

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(“//d1pfint8izqszg.cloudfront.net/images/skins/40000/background.jpg”) 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

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