Tag: css

css

How to change my chat’s design ?

admin Leave a comment

If you want to customize the look&feel of your chat, you need to use CSS.
If you don’t know what is CSS, please visit that site. (however learning CSS will take a few days, so If you have some urgent customisations, I suggest you hire a freelancer or eventually contact us for this extra task)

Do not overwrite, but add !

Many users ask us to send them access to CSS so they can modify it. This is a big misunderstanding about how CSS really works.
In order to maintain the script up to date, you will never change script or CSS, but you will add yours. The added properties will simply overwrite the existing one.

How to add my own CSS ?

Go to your chatadmin panel -> config ->Design/Layout and insert there the link to your own CSS under the Link to external CSS to customize your chat text field.
Ex:
https://www.mywebsite.com/myCss.css

How to write my own CSS ?

You need good knowledge of CSS. Use Google Developer tool to get the selector of your DOM, and then write the property.
Ex: Here is the CSS to overwrite the way messages are shown in the chat:
We hide the avatar, the time and make the message fit 1 line:

div.message img.userItem {
    display: none;
}
div.message div.timeStamp {
    display: none;
}
div.message div.content {
    box-shadow: none;
    border: none;
    display: inline;
}
div.message div.flex-property {
    display: inline!important;
}
.arrow-chat {
    display: none!important;
}
div.message div.userItem {
    display: inline;
    font-weight: bold;
}

div.message div.userItem:after {
    content: ":";
}

The messages will appear now:

CSS to make messages appear on 1 line !

CSS customize your html5 chat

admin 1 Comment

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

 

css3

Customize your design

admin 3 Comments

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.