{"id":258,"date":"2018-06-29T07:58:40","date_gmt":"2018-06-29T07:58:40","guid":{"rendered":"https:\/\/html5-chat.com\/blog\/?p=258"},"modified":"2018-06-29T07:58:40","modified_gmt":"2018-06-29T07:58:40","slug":"customize-your-design","status":"publish","type":"post","link":"https:\/\/html5-chat.com\/blog\/customize-your-design\/","title":{"rendered":"Customize your design"},"content":{"rendered":"<h3>How to customize HTML5 chat design ?<\/h3>\n<p><a href=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2018\/06\/css31.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-259 alignleft\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2018\/06\/css31-300x300.png\" alt=\"\" width=\"114\" height=\"112\" \/><\/a>Many users do write to us asking if we can send them the CSS file so they can modify it.<\/p>\n<p>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.<\/p>\n<p>The CSS allows to override the existing CSS. So instead of change the CSS, you need to ADD your own to OVERRIDE the exiting.<br \/>\nAnd here is how to do that:<\/p>\n<ol>\n<li>As usual go to your <a href=\"\/chatadmin\">chatadmin<\/a> and choose the <strong>config <\/strong>\u00a0-&gt;\u00a0<strong>design tab<\/strong>:<\/li>\n<li>You will find the property : &#8220;<strong>Link to external CSS to customize your chat&#8221;<\/strong><\/li>\n<li>you will insert the LINK to your OWN css : It must be http, like<br \/>\nhttp:\/\/myownsite.com\/myCustomizedCss.css<\/li>\n<li>\u00a0in your\u00a0myCustomizedCss you will override the existing CSS<br \/>\nIf for instance you want the send Button to be red, you will create something like<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<pre class=\"prettyprint\">#send-msg-btn {\r\nbackground-color: red;\r\n}\r\n<\/pre>\n<p>That will over ride the existing CSS for the <strong>#send-msg-btn<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>and as result, you will get a <strong>red<\/strong> send button.<\/p>\n<p><a href=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2018\/06\/red.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-266\" src=\"https:\/\/html5-chat.com\/blog\/wp-content\/uploads\/2018\/06\/red.jpg\" alt=\"\" width=\"240\" height=\"113\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,20],"tags":[4,47],"class_list":["post-258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-features","category-theme","tag-css","tag-customize"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/258","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=258"}],"version-history":[{"count":6,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/258\/revisions\/268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}