CSS customize your html5 chat

We added a CSS for HTML5 chat so you can customize every DOM element on your chat.

Go to your chat admin, choose the CSS editor.

cssEditor

 

How to use the CSS editor ?

Click on Select DOM checkbox, then click on any element on your chat.

You can change the CSS of that element such as : font, text, Border, Paddings & Margins, Position, Background and Additional css.

Once the rule is set, press the save css button to save the css

 

Chat HTML5 is FLEX

Why using FLEX ?

We changed the CSS layout to FLEX instead of using old layout techniques like floating, margins, paddings.

Q) What does it change for me ?

A) Nothing.


Q) So what’s the point ?

A) Using Flex layout allows us to make the layout .. more flexible


Q) I still don’t understand what’s the point !

A) It will allow many different layout like for conferences, webinars.
Ex: you want the user’s list to be on the LEFT side,  Just add 1 line of CSS  and that’s all

#chatContainer {
   order:2
}

 

if you don’t know how to change the CSS of your layout, please refer to that post

 

css3

Customize your design

How to customize HTML5 chat design ?

Many users do write to us asking if we can send them the CSS file so they can modify it.

An answer is NO: the CSS file is Global and stored on our servers. So people think they are unable to change the design of the chat, which of course is untrue.

The CSS allows to override the existing CSS. So instead of change the CSS, you need to ADD your own to OVERRIDE the exiting.
And here is how to do that:

  1. As usual go to your chatadmin and choose the config  -> design tab:
  2. You will find the property : “Link to external CSS to customize your chat”
  3. you will insert the LINK to your OWN css : It must be http, like
    http://myownsite.com/myCustomizedCss.css
  4.  in your myCustomizedCss you will override the existing CSS
    If for instance you want the send Button to be red, you will create something like

 

#send-msg-btn {
background-color: red;
}

That will over ride the existing CSS for the #send-msg-btn

 

and as result, you will get a red send button.