Category: theme

background

How to add picture to background ?

admin 1 Comment

This is a common question we receive. The answer is obvious to who knows some CSS.
I recommend to read the post about customizing the design with CSS.

For people who do not have CSS knowledge

First, it is really important you learn CSS since design on web is totally related to CSS. Let add a background image for you chat step by step

  1. Prepare Picture
    You background picture should have a good size (ex: 1024x800px) and should be available somewhere on the web accessible through HTTPS
    ex:
    https://c.pxhere.com/images/d1/a4/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d
  2. With your editor (notepad for instance) create a file with .css extension ex: myCss.css
  3. Edit this file and insert that code inside
#container {
    background-image: url("https://c.pxhere.com/images/d1/a4/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d");
    background-size: cover;
}
#tabs .nav-tabs {
    background-color: inherit;
}
#roomsContainer2, #usersContainer2, #friendsContainer2 {
    background-color: inherit;
}

#footer {
    background-color: inherit;
}

#tabs .tab-pane  {
    background-color: inherit;
}

#tabs {
    background-color: inherit;
}
#usersContainer {
    background-color: inherit!important;
}
  1. Save that file and upload it to YOUR server so it is accessible with HTTPS
    ex: https://www.mysite.com/myCss.css
  2. Go to you chatadmin, go to config and then choose design/layout tab and insert that link ( https://www.mysite.com/myCss.css) in the Link to external CSS to customize your chat  field
inside config

6. and that’s all: the background image should be inside your chat

This is also the procedure to change the design of any element of your chat. With CSS you can customize EVERYTHING you want, including the layout.

layout

Left layout for chat

admin 1 Comment

We updated our layout system using flex for display elements. This allows to easily change the layout of the chat.

The first layout change you can do is to align the user list on the left. You can swap from left/right layout from you chatadmin console -> config-> design and select between “left” and “right” from the “Display users’ list on the left” select box.

A sample with LEFT layout

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

 

Chat HTML5 is FLEX

admin Leave a comment

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

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.