RumbleTalk sets itself apart from the competition by being the most customizable group chatroom available on the market. The latest custom css tips and tricks can be found in here.

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 with custom CSS can be completely transformed.

But not everyone knows CSS, so we’ve put together this list of easy chat 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.  (Note, for the mobile version, we have other CSS tricks).

All you have to do is:

1. Copy the chat CSS code from this list.
2. Log in to your RumbleTalk admin panel.
3. In the chat settings, under “Design”, click on “Add CSS for Web Browsers”.
4. Paste your code and close the box.

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

User Icons – Chat CSS tricks

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 – Chat CSS tricks

6. Hide system messages
7. Hide message date & time
8. Hide all option buttons
9. Hide specific option buttons
10. Insert a clear chat area button
11. Hide the number of viewers and listeners
12. Hide the “Go To Facebook Profile” button
13. Change the emojis

Text – Chat CSS tricks

14. Change the group chat administrators’ text color
15. Change the text displayed in the guest login button
16. Remove the login type label from the user profile
17. Add borders to the username text
18. Add borders to the message text
19. Add an element above the chat in full-screen
20. Hide the QR box
21. Add a closing icon to the floating bouncing icon
22. Remove the field image and description in the register
23. Set max image size in a chat
24. Set max YouTube size in a chat
25. Hide Twitter Link in Users Profile
26. Disable group chat and allow only private chats
27. Hide scrolling for non-moderators

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("https://www.test.com/storage/usericon.png");
}


2. Change the user icon size in the user list

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


3. Change the user icon size in the chat area

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


4. Hide the user icons in the user list

.user-image { display: none; }


5. Hide the user icons in the chat area

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


Note, if you like to remove the white tooltip next to each message, you can use this code
.main-message-container::before,
.main-message-container::after { content: none; }


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; }


7. Hide message date & time

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; }


8. Hide all option buttons

#options { display: none !important; }


9. Hide specific option buttons

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

.options-dialog .export {
display: none !important;
}
.options-dialog .popup {
display: none !important;
}
.options-dialog .toggle-sound {
display: none;
}

.options-dialog .qr-option { display: none !important; }

.options-dialog .logout { display: none !important; }

/* This option only applies to mobile */

.options-dialog .toggle-private {
display: none;
}

.options-dialog .font-size {
display: none;
}

.options-dialog .admin-mode-switch {
display: none !important;
}

/* This option can only be applied by admins */

.options-dialog .clear-messages {
display: none !important;
}

/* This option can only be applied by admins. */

10. Insert a clear chat area 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; }

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; }

12. Hide the “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;}


13. Change the emojis

Use the following code for each emoji, where the number 10 represents one of the emojis (from 1 to 33, excluding 6), and the URL represents the image you want to replace it with.

.smiley-10 {
width: 0 !important;
padding-right: 30px;
background-image: url("https//www.exampleurl.com/smile2.gif");
height: 30px;
}


14. Change group chat administrators text color

Set yourself apart as the group chat administrator by changing the
color of your username and message text. By default the color is red.

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: 'Join Us!';
position: relative;
color: #fff;
left: -20px;
}


16. Remove the login type label from the user profile

.login-type { display: none; }


17. Add borders to the username text

This code will add black and bold borders to the usernames 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;
}


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;
}


19. Add an element above the chat in full screen

Many ask us how I can add a player on top of the chat area.
The following code will be added to your HTML (not on the RumbleTalk CSS area) in full screen.

<style>
<inner element height> - the height of the extra element
#wrapper { height: 100%; }
#extra-element {
width: 100%;
height: <inner element height>;
padding: 0px;
}
#chat-wrapper {
position: relative;
width: 100%;
height: 100%;
}
<chat-iframe> {
max-height: calc(100% - <inner element height>);
}
</style>
<div id="wrapper">
<div id="extra-element">THE CODE YOU WANT TO BE ON TOP OF THE PAGE </div>
<div id="chat-wrapper">THE CHAT CODE</div>
</div>


20. Hide the QR box

When you want to hide the QR option in your chat.

To remove the button, add the following:

.options-dialog .qr-option { display: none !important; }

To keep the button for chat moderators only, add the following:

.moderator #options #opts { display: list-item; }

21. Add closing icon to the floating bouncing icon

If you want to add a closing icon to the floating icon. You can add this code and make sure you change the hash code (in red).
(function(){
var hash = 'YOUR_HASH',
handle;


handle = setInterval(
function () {
if (
!window.RumbleTalkChat ||
!window.RumbleTalkChat[hash] ||
!window.RumbleTalkChat[hash].mainDiv
) {
return;
}


clearInterval(handle);
if (hash == 'YOUR_HASH') {
throw new Error('Someone forgot to replace the place holder "YOUR_HASH" with your chat\'s hash');
return;
}


var img = new Image();
img.src = 'https://d241b8qep9dzid.cloudfront.net/20190625083406/italic.png';
img.style.cursor = 'pointer';
img.style.position = 'absolute';
img.style.bottom = 0;
img.style.right = 0;
img.onclick = function () {
window.RumbleTalkChat[hash].mainDiv.parentNode.removeChild(window.RumbleTalkChat[hash].mainDiv);
};


window.RumbleTalkChat[hash].mainDiv.appendChild(img);
},
100
);


}());


22. Remove the image and description of the field in the register dialog box

Remove the field image and description from the registration form.
.register-login-dialog form .row:nth-child(n+4) {
display: none;
}


23. Set max image size in a chat

Add the maximum size of an image to the chat conversation. Clicking on a small image will open it in its original size.
.message-text a img {
max-width: 200px !important;
max-height: 200px;
}


24. Set max YouTube size in a chat

Add the maximum size of a YouTube video in a chat. Clicking on a small image will open it in its original size.

.message-text .youtubeWrapper {
max-width: 300px !important;
max-height: 300px;
  padding: 0;
height: auto;
}
.youtubeWrapper > iframe {
height: auto;
position: static;
}


25. Hide the Twitter Link in user profile

Hide Twitter Link in user profile (when clicking on the gear icon in the private chat ).
.twitter-button {
display: none;
}


26. Disable group chat and allow only private chats

If you want to allow only private chat discussion so all can talk in private but not have a group discussion then choose a chat type “Group chat”, and then add the following CSS to both the web and mobile CSS versions.
#content,
#text:not([readonly]),
#chat-extra,
#send-button
{ display: none !important; }


27. Hide scrolling for non-moderators

If you want to prevent the scrolling of the chat message area – which will prevent regular users from accessing old messages, add the following CSS code to both the web and mobile CSS versions:

body:not(.moderator) #chat {
overflow-y: hidden;
}


The post 27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE) appeared first on Online Group Chat Room Plugin for Websites and Live events.

One major factor in our research was our need to customize the chat, really customize it. We needed to be able to change not only the chat colors, but also the borders, line thickness, chat background image, fonts and more. With these standards, we did not find any service or downloadable chat software to satisfy our criteria.

We could not find anything suitable for our needs and…mmmm…well, it looked awful. What we found were a variety of Flash chat rooms that appeared out of date, were not mobile friendly and had very few options to customize. We tried one or two services but the result was that it always looked like someone forced an unrelated chat room design with an irrelevant chat background into our nice looking, well designed community website.

This is what initiated the creation of RumbleTalk group chat service. Our vision was to give website owners the ability to completely customize a group chat room to fit their website. We wanted site owners to be able to easily create and embed chats, customize it up to match their website design, control when it was on or offline, moderate, and more.

With this in mind, a great team, and a lot of hard work, RumbleTalk was born.

Today, RumbleTalk has three major areas where users can customize their group chat: design, operation, and location. Each area has been thoroughly thought out and programmed with our customers in mind.

Design Customization

Design is usually the first area of customization that people think of and is rightfully a critical element when deciding to use group chat in your website or not.

If the chat doesn’t look like it belongs there, the page will appear amateur and an amateur site makes it harder for your customers to build trust with your brand.

The RumbleTalk team deeply understands the importance of design (that is what prompted this company anyway) so we created three levels of design customization to make it easy for anyone at any tech-literate level to get the group chat they want.

Theme Library

Our designers have put together a robust theme library for RumbleTalk customers to simply click to customize. Our themes range from simple to intricate. Some have plain color backgrounds, others have images, and some have transparent backgrounds. These themes can be changed on the spot, so even during a conversation the design can be changed without hassle.

And if you can’t find a theme that is exactly what you want, you can always use it as a starting point and tweak it in the advanced design panel rather than starting from scratch.

Advanced Design

RumbleTalk group chat designs can always be changed, tweaked, modified and perfected with the advanced design option. Under the advanced design tab, you can change everything from colors, fonts, borders, dimensions, and the chat background.

One highly beneficial use of this is uploading your own image or logo as the chat background. This is one of the best ways to make the chat conform to your website.

CSS

For those who have a working knowledge of CSS, we have included the ability to input your own CSS code. This means that a CSS expert can truly transform a RumbleTalk group chat to look amazing while still retaining the efficiency of the RumbleTalk software.

And even if you don’t know CSS, we put together a collection of CSS tricks that are easy to copy and paste.

And, CSS customization can be used for both the web and mobile versions of the RumbleTalk group chat.

Operational Customization

While design customization is crucial, the operational customization can be just as important.

What do I mean by operational customization?

These are the type of settings that determine if your chat is:

• Public or private
• Online or offline
• Archived or forgotten

And much, much, more!

Take a closer look.

Custom Language

Online communities and chatters exist all over the world so a truly customizable chat should be capable of changing languages. RumbleTalk group chat languages can be customized in different ways.

The chat interface is written in English, but can be changed to one of 36 languages and counting. And if your preferred language isn’t shown, you can email us a translation and we will set it up for you.

Beyond the chat interface, you’ll want to have the ability to change what language is accepted into the conversation. There’s no restrictions here. Your community can input whatever language they want and a RumbleTalk chat will recognize and display it.

Sometimes, a group chat owner will want to filter out certain unwanted word. RumbleTalk also has a filter-word setting where you can decide what words will automatically be filtered by the RumbleTalk software so that they do not appear in the chat. This setting is especially useful when the group chat is used by children and educational settings.

Custom Audience

Customizing your audience is an essential element to customizing a group chat.

In some situations, a chat owner will want to open the conversation to the entire world and get the largest audience possible. Other times, a chat owner will want to reserve the benefits of the conversation for those in an exclusive organization.

RumbleTalk gives group chat owners the ability to make their group chats private or public. This extends even as far as allowing site visitors the ability to view, but not participate in, the conversation without logging in.

Of course, the group chat can be configured to be totally public, but in some cases group chats are used for private meetings or confidential information sharing. In this case, a user list can be set up to only allow specific individuals to enter or view.

Organizations with an existing user base can link this information to their RumbleTalk group chat allowing their login to their site account to automatically log them in to the group chat and populate their profile details. This API integration can make a huge difference to established communities!

Internet trolls are an unfortunate reality and a bothersome audience. Adding one more level to the custom audience, you can choose who is a moderator or chat administrator and they can choose who is not allowed in the conversation. By banning users by IP, you can prevent trolls from logging in under different aliases on the same computer. This customization is most appreciated when it is absolutely necessary.

And when you don’t want an audience at all, a RumbleTalk group chat can be taken completely offline.

Custom Security

Online security is a big deal. You want your community to trust that you take their security seriously, and you want to know that your group chat provider takes your security seriously. This is why RumbleTalk can be enabled with HTTPS TLS/SSL security. By enabling this feature, chats are encrypted and can’t be “listened” to by unwanted hackers.

Most RumbleTalk users like having the ability to export their chat transcript or keep it archived on the RumbleTalk cloud, but others would prefer no record of their conversation at all. This customization can either be a valuable archiving feature or an extra step to secure trade secrets are not stolen. Further in this customization, a RumbleTalk group chat owner can determine if users are able to see the chat history or not.

Within the group chat room, users designated as chat administrators are able to act as a moderating security force and have the authority to delete inappropriate messages, kick out abusive users and ban the users that violate community conduct rules.

Location Customization

Location customization refers to where your community is directed to access the group chat room.

A lot of group chat services want you and your community to log into their website to be able to chat.

But not RumbleTalk.

Instead, a RumbleTalk group chat room has several options for you to set up shop. This could be on your website, Facebook page, or even as an independent URL. In any case, you won’t have to send your community away in an attempt to bring them together, because that just doesn’t make sense.

Group Chat in Your Website

After you have customized your group chat to match your site, you’ll want to embed it. This sounds like a complex thing to do, but we’ve made it easy.

A RumbleTalk group chat comes with a single line of code that opens a window to your group chat. So, all you have to do is copy and paste this code into a page and the chat room will embed. Because we’ve made it dynamic, the group chat will take up the space you give it meaning you won’t have to toggle the pixels width and height.

However, embedding a chat isn’t the answer for every website so we also created a floating icon to open the chat on top of your content. You can see an example on our homepage. A chat icon sits in the bottom left or right corner of your page and is clicked to open the chat and clicked to minimize it while you’re browsing.

Group Chat on Your Facebook Page

Another way to customize your group chat is by choosing to include it on your Facebook page. Doing so is as simple as logging in to your Facebook.

If your community operates solely on the Facebook or if your Facebook page supports a website, you can still include a group chat feature to connect your audience. Group chat offers an instantaneous way for members to interact with each other rather than the standard commenting platform Facebook provides. And if you want to connect your Facebook audience with your website audience, this is a great way to bring them into the same room.

Group Chat URL

Not everyone has a website or Facebook page, but that doesn’t mean you don’t want a customized group chat. A RumbleTalk group chat comes with a URL that opens the group chat in a new tab or window. This is great for one-time special events that need a group chat to foster dialog between participants.

Group Chat Plugins

For those whose sites are hosted, we’ve created plugins for the major platforms including:

• WordPress
• BBpress
• BuddyPress
• Joomla
• Jimdo
• Drupal
• phpBB
• Magento
• Yola
• Blogger
• Wix
• Squarespace
• Tumblr

Each platform is a little different, but we took the extra step to make it easy for our customers.

Are You Ready to Customize a Group Chat?

Making it easy was a goal that we are proud to have accomplished.

RumbleTalk was created to give designers the ability to create a beautiful group chat room for their clients, but the more we worked on this project, the more potential we saw. Customizing a mobile friendly group chat room can improve a community’s member retention and add value to the community as a whole. It’s a worthy effort!

Group chat is now accessible not only to website owners but also to the communities they lead. Before RumbleTalk was so easy to incorporate in a website, a lot of communities had the problem of spreading their conversation thin between the various social media platforms. This caused some people to communicate on Facebook, while others were on Twitter, or Instagram, or whatever. With an embedded group chat, the community can stay on the website that brings them together in the first place and the conversations happens with everyone in the same “location”.

This article only covered the customization settings of RumbleTalk and in addition to these there are a ton of great features that make it easy to use and highly functional for your community. We built in tools like document sharing and video calls and everything in between.

We’re always improving our platform with these goals in mind. It’s a never ending project, but we truly strive to make the best group chat platform for communities.

The post It is Totally Possible to Customize a Group Chat appeared first on Online Group Chat Room Plugin for Websites and Live events.

As an administrator, you have a full access to customize your chat box using simple admin panel actions. These options enable you to change the following:

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

You can access the customize menu at the bottom of your dashboard. In there you will find settings. Click on it and you will have the customization page appear before you.

Now, let us try to customize our chat room box.
If you look at the customization page, you will find 7 customization designs for your chat box. The customization settings consist of 6 basic customizations and 2 advanced customizations using CSS.

Basic chat box customization

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

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

Please check the following guide for further explanation:

Advanced customization with CSS

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

To change color appearance, you can use either a color-hex code or a RGBA (Red-Green-Blue-Alpha) value. For instance: a maroon color would use one of the following codes:
Color-hex #5a1414
or
RGBA (90, 20, 20, 100)

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

After customizing your chat room you can save the setting and see the result in your embedded chat box:

3- Some useful mobile CSS parameters

The following CSS parameters 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 a brown color. Find the result in your smartphone or tablet

Its very simple to customize your chat room….
Now, you can play around and change your chat box appears to be as fancy as you want. This functionality will give you a totally different chat box to serve your purpose.

The post Customize Your Chat Box Style With CSS appeared first on Online Group Chat Room Plugin for Websites and Live events.

Back then the chat looked exactly the same in mobile and web. However, since mobile has special features and behavior, we found out that web view was causing many mobile users to leave the chat. We then built the Mobile chat version of RumbleTalk which made a huge difference for customers and mobile usage.

When we started RumbleTalk, we created an “Advanced design” feature, where people could change colors, backgrounds, borders, fonts, font size, and more.

However, after a while, we understood that for advanced users and web designers, 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 then that users would control any aspect of the chat design simply by letting them control the CSS.

In the example image above, we loaded a new background using CSS. This is basically what a customer sees when he/she is using a 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 designers that let them actually, design. It also meant that they could avoid using off-the-shelf flash-like chat room software that always looks strange with respect to their website design.

One more important point, web designers have 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 designers that expressed themself easily and were not forced to use a 3rd party chat software that has 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 understand that the work is not finished. We knew that in order to give a complete 360-degree solution, we would 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, the mobile CSS feature was launched last week. You can now create and customize your mobile chat design. Note, that 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.

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. Then we loaded up the same background we had in the web chat design.
   See here the line we added.#chat { background: url(“https://rumbletalk-images-upload.s3.amazonaws.com/a78f4e7c872dbc2654ea3bb2238ef365/1448364119-colors.jpg”) no-repeat scroll left center; }
3. Then we changed the header and foot colors.top-bar { 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

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 requests that we get from clients for mobile customization are:

Background

• Changing the Top top-bottom bar color
• Changing the chat background color

Fonts

• Changing the Font size

Admin User

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

The post New Feature: Customize your Mobile Chat using CSS appeared first on Online Group Chat Room Plugin for Websites and Live events.

One of our designer took the time to create a great chat room skin with only CSS modifications. The result was pretty amazing. We are going to package and use this skin as one of our default offered skins. This means that soon you will be able to switch your chat room style to this news advanced chat room.

For those who are not familiar with this option, you can find it in the
Admin panel –> Settings —> Advance Design.

CSS Editor changes will reflect immediately in the design on the right.

Note, once you move to the CSS mode, you cannot go back to the visual editor without deleting all your modifications. This means one needs to choose a visual mode or a CSS design.

** CSS editor should be used by a person well known with CSS styling. If not, the chat design may not load.

The post See how we designed a new chat room style only with CSS modifications. appeared first on Online Group Chat Room Plugin for Websites and Live events.

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.

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

The post Case Study: DittyTV using chat box features worth knowing appeared first on Online Group Chat Room Plugin for Websites and Live events.