{"_id":"551255784fc2a82500c08bbe","category":{"_id":"55055820728deb23005ec0f5","pages":["55055820728deb23005ec0f8","55055820728deb23005ec0f9","55055820728deb23005ec0fa","55055820728deb23005ec0fb","55055820728deb23005ec0fc","55055820728deb23005ec0fd","55055820728deb23005ec0fe","550eaf4c76b3980d00973807","550eaf6a76b3980d00973809","55103d637f4a7a1900f5793b","55103dc70f12ba0d00b2e1ca","55103e2749806219000632cf","551255784fc2a82500c08bbe","551282a13228bc2500819b20","55129599147ac60d000aa5eb","551295fc6f6de80d00790439","55a39ad35f54460d000d4c98"],"__v":11,"version":"5505581f728deb23005ec0f4","project":"54ad7b1d9219922100751796","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-01-08T12:49:43.339Z","from_sync":false,"order":0,"slug":"widgets-and-website-integration","title":"Widgets and Website Integration"},"version":{"_id":"5505581f728deb23005ec0f4","forked_from":"54ad7b1d9219922100751799","project":"54ad7b1d9219922100751796","__v":4,"createdAt":"2015-03-15T09:59:59.748Z","releaseDate":"2015-03-15T09:59:59.748Z","categories":["55055820728deb23005ec0f5","55055820728deb23005ec0f6","554213dacbc48d0d001544ef","55421a598aeff51700a20db6","55a64fe680c8a30d00b325e0"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0"},"__v":9,"project":"54ad7b1d9219922100751796","user":"54d350b5eefae10d0016cfbc","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-03-25T06:28:08.154Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"The LiveSite UI elements have been structured for maximum flexibility and control. A few standards have been applied in order to prevent collision with your own CSS and to make it easy to understand and adjust the CSS. The LiveSite UI has two built-in skins, one skin is optimized for Mobile and one is optimized for Desktop.\n\n#Understanding the LiveSite conventions\n\n* The **livesite_** prefix is added to ID attributes\n* The **ls-** prefix is added to CSS classes used for styling\n* The **livesite-** prefix is added to CSS classes used for behaviour\n* The **ls-mobile** class is added to all LiveSite elements when the page is viewed with mobile browsers\n* The **ls-desktop** class is added to all LiveSite elements when the page is viewed with desktop browsers\n* The **ls-xxx-T** class pattern represents theme-related css\n\nAn element can and will mostly have a combination of id attributes (for the parent html element of each component), design css classes and behavioural css classes. Like the *ls* abbreviation, other abbreviations are used to shorten the class names while maintaining some representation of the hierarchy. When styling elements a combination or a hierarchy of selectors is often promoted.\n\nSome examples -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#livesite_active_engage {\\n  /* This selector matches the root element of the LiveSite Invite compontent */\\n}\\n\\n.ls-font-family-T {\\n  /* This selector represents the font family used in all of the LiveSite UI components */\\n}\\n\\n#livesite_action_buttons .ls-action-T {\\n  /* This selector matches all the action buttons inside the floating menu, \\n     here you can override their style without affecting the entire theme */\\n}\\n\\n\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nCSS reset is applied to the LiveSite elements so that general selectors won't affect the LiveSite skin. However, *!important* flags used in the CSS files of your website can affect the LiveSite UI. It's generally a good practice to avoid using *!important* in your css.\n\n#Controlling the theme\n\nMost of the theming can be done in the [LiveSite Editing Page](https://www.vcita.com/my/widgets/active_engage/edit), there you can also find some predefined themes built by our designers. If you want to customize the theme, whether for advanced styling like gradients or to adjust it for a specific page / site this can be done using css.\n\nThese are the theme classes used by the LiveSite, most of the values are dynamic and set by the theme you use -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* Font family used by all components */\\nbody .ls-font-family-T {\\n  font-family: \\\"open sans\\\", arial, sans-serif;\\n}\\n\\n/* Base font size, the actual sizes are relative to the base */\\nbody .ls-font-size-T {\\n  font-size: 12px;\\n}\\n\\n/* LiveSite Invite background color */\\nbody .ls-ae-bg-T {\\n  background-color: #FFFFFF;\\n}\\n\\n/* LiveSite Invite text color */\\nbody .ls-ae-text-T {\\n  color: $active_engage_text_color;\\n}\\n\\n/* The :before selector is used to set the color of the icons */\\nbody .ls-ae-text-T:before {\\n  color: $active_engage_text_color;\\n  border-color: $active_engage_text_color;\\n}\\n\\n/* LiveSite Invite link color */\\nbody .ls-ae-link-T, body .ls-ae .ls-text a {\\n  color: $active_engage_link_color;\\n}\\n\\n/* LiveSite Invite main action color */\\nbody .ls-main-action-T {\\n  background-color: $engage_action_bg;\\n  color: $engage_action_color;\\n}\\n\\nbody .ls-main-action-T:hover {\\n  background-color: $engage_action_bg;\\n}\\n\\n/* LiveSite Invite engage button and floating actions color */\\nbody .ls-action-T {\\n  color: $engage_button_color;\\n  background-color: $engage_button_bg;\\n}\\n\\nbody .ls-action-T:hover {\\n  background-color: $engage_button_bg;\\n}\\n\\n/* The :before selector is used to set the color of the icons */\\nbody .ls-action-T:before {\\n  color: $engage_button_color;\\n}\\n  \\n/* LiveSite unread messages counter color */\\nbody .ls-counter-T {\\n  background-color: #ED131D;\\n  color: #FFFFFF;\\n}\\n\\n/* TODO: Add the predefined colors after extracting them */\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nAs mentioned above, you can control the style of the entire UI by overriding these classes or customize a specific action by combining selectors. For instance, if you want to change the color of the LiveSite Invite engage button and the floating actions only on mobile use the following code - \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"body .ls-action-T.ls-mobile {\\n  color: blue;\\n  background-color: white;\\n}\\n\\nbody .ls-action-T.ls-mobile:hover {\\n  background-color: lightblue;  \\n} \\n \\nbody .ls-action-T.ls-mobile:before {\\n  color: blue;  \\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Notice the *body* selector at the beginning of rule, CSS depends on the hierarchy so if a couple of rules define the same property the tighter selector will be the winner. Adding *body* at the beginning ensures that this rule will be the one who is applied.\"\n}\n[/block]\n\n\n#Changing colors per action\n\nSimilar to the customization above, themes can be applied to specific elements, for example, make the Schedule button blue and the Call button Red -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* Make the schedule button blue */\\nbody #livesite_action_buttons .livesite-schedule {\\n  color: blue;\\n  background-color: white;\\n}\\n\\nbody #livesite_action_buttons .livesite-schedule:hover {\\n  background-color: lightblue;  \\n} \\n \\nbody #livesite_action_buttons .livesite-schedule:before {\\n  color: blue;  \\n}\\n\\n/* Make the call button red */\\nbody #livesite_action_buttons .livesite-call {\\n  color: red;\\n  background-color: white;\\n}\\n\\nbody #livesite_action_buttons .livesite-call:hover {\\n  background-color: lightred;  \\n} \\n \\nbody #livesite_action_buttons .livesite-call:before {\\n  color: red;  \\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nTo explore the elements you want to style we recommend using the browser inspector.\n\n#Changing the position of the LiveSite Invite\n\nIn addition to controlling the style of the LiveSite UI elements you can also control their layout. The LiveSite UI Mobile and Desktop skins have been built to maximize the experience and conversion in mind but it might not fit all websites. For instance, you might want to align the LiveSite Invite and / or the floating actions -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* Move the LiveSite Invite to the left */\\nbody #livesite_active_engage.ls-desktop,\\nbody #livesite_engage_button.ls-desktop {\\n  /* Move to the left */\\n  right: auto;\\n  left: 0px;\\n\\n  /* The margin controls the distance from left */\\n  margin: 10px 10px 0 80px; \\n}\\n\\n/* Move the LiveSite Floating actions to the left */\\nbody #livesite_action_buttons.ls-desktop {\\n  left: 0px;\\n  right: auto;\\n}\\n\\nbody #livesite_action_buttons.ls-desktop .ls-action > span {\\n  right: auto;\\n  left: 50%;\\n}\\n\\nbody #livesite_action_buttons.ls-desktop .ls-action > span em {\\n  left: 10px;\\n  right: auto;\\n}\\n\\n/* Need to fix the animations */\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nMoving the floating actions to the left is more complex and requires advanced CSS skills. However, everything is possible to change, even attaching the floating actions to the top or bottom or replacing the circles with squares.\n\n#Customizing the inline menu on the LiveSite Invite\n\nThe LiveSite Invite inline actions theming can be done only using CSS, the following code shows how to control the entire coloring of the inline actions -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/* Change the background color of the inline actions pane */\\nbody #livesite_active_engage .ls-inline-actions {\\n  background-color: #EBEBEB;\\n}\\n\\n/* Change the color of all the text below the actions */\\nbody #livesite_active_engage .ls-action-C .ls-action-text {  \\n  color: #0A0A0A;\\n}\\n\\n/* Change the color of all the text below the actions */\\nbody #livesite_active_engage .ls-action-C .ls-action {\\n  color: #FBFBFB;\\n  background-color: #207622;\\n}\\n\\n/* Change the actions icon hover color */\\nbody #livesite_active_engage .ls-inline-actions .ls-action:hover {\\n  color: #FBFBFB;\\n}\\n\\n/* Change the color of the 3-dots more icon */\\nbody #livesite_active_engage .ls-action-C .ls-action.ls-my-account:before {\\n  color: #0A0A0A;\\n}\\n\\n/* Change the color of the My Account action */\\nbody #livesite_active_engage .ls-action-C .ls-action.ls-my-account {\\n  background-color: #333;\\n}\\n\\nbody #livesite_active_engage .ls-action-C .ls-action.ls-my-account:before {\\n  color: #FBFBFB;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n#Still missing customizations?\n\nWe are currently in the process of building a snippets library. Don't hesitate to contact our [Support](http://www.vcita.com/contact_us) for more information.","excerpt":"Adjust the LiveSite UI look & feel to your website","slug":"css-customization","type":"basic","title":"Widget CSS Customization"}

Widget CSS Customization

Adjust the LiveSite UI look & feel to your website

The LiveSite UI elements have been structured for maximum flexibility and control. A few standards have been applied in order to prevent collision with your own CSS and to make it easy to understand and adjust the CSS. The LiveSite UI has two built-in skins, one skin is optimized for Mobile and one is optimized for Desktop. #Understanding the LiveSite conventions * The **livesite_** prefix is added to ID attributes * The **ls-** prefix is added to CSS classes used for styling * The **livesite-** prefix is added to CSS classes used for behaviour * The **ls-mobile** class is added to all LiveSite elements when the page is viewed with mobile browsers * The **ls-desktop** class is added to all LiveSite elements when the page is viewed with desktop browsers * The **ls-xxx-T** class pattern represents theme-related css An element can and will mostly have a combination of id attributes (for the parent html element of each component), design css classes and behavioural css classes. Like the *ls* abbreviation, other abbreviations are used to shorten the class names while maintaining some representation of the hierarchy. When styling elements a combination or a hierarchy of selectors is often promoted. Some examples - [block:code] { "codes": [ { "code": "#livesite_active_engage {\n /* This selector matches the root element of the LiveSite Invite compontent */\n}\n\n.ls-font-family-T {\n /* This selector represents the font family used in all of the LiveSite UI components */\n}\n\n#livesite_action_buttons .ls-action-T {\n /* This selector matches all the action buttons inside the floating menu, \n here you can override their style without affecting the entire theme */\n}\n\n", "language": "css" } ] } [/block] CSS reset is applied to the LiveSite elements so that general selectors won't affect the LiveSite skin. However, *!important* flags used in the CSS files of your website can affect the LiveSite UI. It's generally a good practice to avoid using *!important* in your css. #Controlling the theme Most of the theming can be done in the [LiveSite Editing Page](https://www.vcita.com/my/widgets/active_engage/edit), there you can also find some predefined themes built by our designers. If you want to customize the theme, whether for advanced styling like gradients or to adjust it for a specific page / site this can be done using css. These are the theme classes used by the LiveSite, most of the values are dynamic and set by the theme you use - [block:code] { "codes": [ { "code": "/* Font family used by all components */\nbody .ls-font-family-T {\n font-family: \"open sans\", arial, sans-serif;\n}\n\n/* Base font size, the actual sizes are relative to the base */\nbody .ls-font-size-T {\n font-size: 12px;\n}\n\n/* LiveSite Invite background color */\nbody .ls-ae-bg-T {\n background-color: #FFFFFF;\n}\n\n/* LiveSite Invite text color */\nbody .ls-ae-text-T {\n color: $active_engage_text_color;\n}\n\n/* The :before selector is used to set the color of the icons */\nbody .ls-ae-text-T:before {\n color: $active_engage_text_color;\n border-color: $active_engage_text_color;\n}\n\n/* LiveSite Invite link color */\nbody .ls-ae-link-T, body .ls-ae .ls-text a {\n color: $active_engage_link_color;\n}\n\n/* LiveSite Invite main action color */\nbody .ls-main-action-T {\n background-color: $engage_action_bg;\n color: $engage_action_color;\n}\n\nbody .ls-main-action-T:hover {\n background-color: $engage_action_bg;\n}\n\n/* LiveSite Invite engage button and floating actions color */\nbody .ls-action-T {\n color: $engage_button_color;\n background-color: $engage_button_bg;\n}\n\nbody .ls-action-T:hover {\n background-color: $engage_button_bg;\n}\n\n/* The :before selector is used to set the color of the icons */\nbody .ls-action-T:before {\n color: $engage_button_color;\n}\n \n/* LiveSite unread messages counter color */\nbody .ls-counter-T {\n background-color: #ED131D;\n color: #FFFFFF;\n}\n\n/* TODO: Add the predefined colors after extracting them */", "language": "css" } ] } [/block] As mentioned above, you can control the style of the entire UI by overriding these classes or customize a specific action by combining selectors. For instance, if you want to change the color of the LiveSite Invite engage button and the floating actions only on mobile use the following code - [block:code] { "codes": [ { "code": "body .ls-action-T.ls-mobile {\n color: blue;\n background-color: white;\n}\n\nbody .ls-action-T.ls-mobile:hover {\n background-color: lightblue; \n} \n \nbody .ls-action-T.ls-mobile:before {\n color: blue; \n}", "language": "css" } ] } [/block] [block:callout] { "type": "danger", "body": "Notice the *body* selector at the beginning of rule, CSS depends on the hierarchy so if a couple of rules define the same property the tighter selector will be the winner. Adding *body* at the beginning ensures that this rule will be the one who is applied." } [/block] #Changing colors per action Similar to the customization above, themes can be applied to specific elements, for example, make the Schedule button blue and the Call button Red - [block:code] { "codes": [ { "code": "/* Make the schedule button blue */\nbody #livesite_action_buttons .livesite-schedule {\n color: blue;\n background-color: white;\n}\n\nbody #livesite_action_buttons .livesite-schedule:hover {\n background-color: lightblue; \n} \n \nbody #livesite_action_buttons .livesite-schedule:before {\n color: blue; \n}\n\n/* Make the call button red */\nbody #livesite_action_buttons .livesite-call {\n color: red;\n background-color: white;\n}\n\nbody #livesite_action_buttons .livesite-call:hover {\n background-color: lightred; \n} \n \nbody #livesite_action_buttons .livesite-call:before {\n color: red; \n}", "language": "css" } ] } [/block] To explore the elements you want to style we recommend using the browser inspector. #Changing the position of the LiveSite Invite In addition to controlling the style of the LiveSite UI elements you can also control their layout. The LiveSite UI Mobile and Desktop skins have been built to maximize the experience and conversion in mind but it might not fit all websites. For instance, you might want to align the LiveSite Invite and / or the floating actions - [block:code] { "codes": [ { "code": "/* Move the LiveSite Invite to the left */\nbody #livesite_active_engage.ls-desktop,\nbody #livesite_engage_button.ls-desktop {\n /* Move to the left */\n right: auto;\n left: 0px;\n\n /* The margin controls the distance from left */\n margin: 10px 10px 0 80px; \n}\n\n/* Move the LiveSite Floating actions to the left */\nbody #livesite_action_buttons.ls-desktop {\n left: 0px;\n right: auto;\n}\n\nbody #livesite_action_buttons.ls-desktop .ls-action > span {\n right: auto;\n left: 50%;\n}\n\nbody #livesite_action_buttons.ls-desktop .ls-action > span em {\n left: 10px;\n right: auto;\n}\n\n/* Need to fix the animations */", "language": "css" } ] } [/block] Moving the floating actions to the left is more complex and requires advanced CSS skills. However, everything is possible to change, even attaching the floating actions to the top or bottom or replacing the circles with squares. #Customizing the inline menu on the LiveSite Invite The LiveSite Invite inline actions theming can be done only using CSS, the following code shows how to control the entire coloring of the inline actions - [block:code] { "codes": [ { "code": "/* Change the background color of the inline actions pane */\nbody #livesite_active_engage .ls-inline-actions {\n background-color: #EBEBEB;\n}\n\n/* Change the color of all the text below the actions */\nbody #livesite_active_engage .ls-action-C .ls-action-text { \n color: #0A0A0A;\n}\n\n/* Change the color of all the text below the actions */\nbody #livesite_active_engage .ls-action-C .ls-action {\n color: #FBFBFB;\n background-color: #207622;\n}\n\n/* Change the actions icon hover color */\nbody #livesite_active_engage .ls-inline-actions .ls-action:hover {\n color: #FBFBFB;\n}\n\n/* Change the color of the 3-dots more icon */\nbody #livesite_active_engage .ls-action-C .ls-action.ls-my-account:before {\n color: #0A0A0A;\n}\n\n/* Change the color of the My Account action */\nbody #livesite_active_engage .ls-action-C .ls-action.ls-my-account {\n background-color: #333;\n}\n\nbody #livesite_active_engage .ls-action-C .ls-action.ls-my-account:before {\n color: #FBFBFB;\n}", "language": "css" } ] } [/block] #Still missing customizations? We are currently in the process of building a snippets library. Don't hesitate to contact our [Support](http://www.vcita.com/contact_us) for more information.