{"id":878,"date":"2020-02-22T09:57:06","date_gmt":"2020-02-22T09:57:06","guid":{"rendered":"https:\/\/html5-chat.com\/blog\/?p=878"},"modified":"2020-02-22T09:57:08","modified_gmt":"2020-02-22T09:57:08","slug":"how-to-change-my-chat-design","status":"publish","type":"post","link":"https:\/\/html5-chat.com\/blog\/how-to-change-my-chat-design\/","title":{"rendered":"How to change my chat’s design ?"},"content":{"rendered":"\n

If you want to customize the look&feel of your chat, you need to use CSS.
If you don’t know what is CSS<\/a>, 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<\/a> for this extra task)<\/p>\n\n\n\n

Do not overwrite, but add !<\/h2>\n\n\n\n

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.<\/strong><\/p>\n\n\n\n

How to add my own CSS ?<\/h2>\n\n\n\n

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

How to write my own CSS ?<\/h2>\n\n\n\n

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:<\/p>\n\n\n\n

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

div.message div.userItem:after {
    content<\/em>: \":\";
}
<\/pre>\n\n\n\n
The messages will appear now: <\/p>\n\n\n\n
\"\"
CSS to make messages appear on 1 line !<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":890,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[4],"class_list":["post-878","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-css"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/comments?post=878"}],"version-history":[{"count":7,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/878\/revisions"}],"predecessor-version":[{"id":893,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/878\/revisions\/893"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media\/890"}],"wp:attachment":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media?parent=878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/categories?post=878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/tags?post=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}