The Client Portal Widget 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 Client Portal Widget UI has two built-in skins, one skin is optimized for Mobile and one is optimized for Desktop.

Understanding the Client Portal Widget CSS (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 -

#livesite_active_engage {
  /* This selector matches the root element of the LiveSite Invite component */
}

.ls-font-family-T {
  /* This selector represents the font family used in all of the LiveSite UI components */
}

#livesite_action_buttons .ls-action-T {
  /* This selector matches all the action buttons inside the floating menu, 
     here you can override their style without affecting the entire theme */
}

CSS reset is applied to the Client Portal Widget elements so that general selectors won't affect the Client Portal Widget skin. However, !important flags used in the CSS files of your website can affect the Client Portal Widget 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 Client Portal Widget Editing Page, 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 Client Portal Widget, most of the values are dynamic and set by the theme you use -

/* Font family used by all components */
body .ls-font-family-T {
  font-family: "open sans", arial, sans-serif;
}

/* Base font size, the actual sizes are relative to the base */
body .ls-font-size-T {
  font-size: 12px;
}

/* LiveSite Invite background color */
body .ls-ae-bg-T {
  background-color: #FFFFFF;
}

/* LiveSite Invite text color */
body .ls-ae-text-T {
  color: $active_engage_text_color;
}

/* The :before selector is used to set the color of the icons */
body .ls-ae-text-T:before {
  color: $active_engage_text_color;
  border-color: $active_engage_text_color;
}

/* LiveSite Invite link color */
body .ls-ae-link-T, body .ls-ae .ls-text a {
  color: $active_engage_link_color;
}

/* LiveSite Invite main action color */
body .ls-main-action-T {
  background-color: $engage_action_bg;
  color: $engage_action_color;
}

body .ls-main-action-T:hover {
  background-color: $engage_action_bg;
}

/* LiveSite Invite engage button and floating actions color */
body .ls-action-T {
  color: $engage_button_color;
  background-color: $engage_button_bg;
}

body .ls-action-T:hover {
  background-color: $engage_button_bg;
}

/* The :before selector is used to set the color of the icons */
body .ls-action-T:before {
  color: $engage_button_color;
}
  
/* LiveSite unread messages counter color */
body .ls-counter-T {
  background-color: #ED131D;
  color: #FFFFFF;
}

/* TODO: Add the predefined colors after extracting them */

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 Client Portal Widget main call to action button and the floating actions only on mobile use the following code -

body .ls-action-T.ls-mobile {
  color: blue;
  background-color: white;
}

body .ls-action-T.ls-mobile:hover {
  background-color: lightblue;  
} 
 
body .ls-action-T.ls-mobile:before {
  color: blue;  
}

❗️
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.

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 -

/* Make the schedule button blue */
body #livesite_action_buttons .livesite-schedule {
  color: blue;
  background-color: white;
}

body #livesite_action_buttons .livesite-schedule:hover {
  background-color: lightblue;  
} 
 
body #livesite_action_buttons .livesite-schedule:before {
  color: blue;  
}

/* Make the call button red */
body #livesite_action_buttons .livesite-call {
  color: red;
  background-color: white;
}

body #livesite_action_buttons .livesite-call:hover {
  background-color: lightred;  
} 
 
body #livesite_action_buttons .livesite-call:before {
  color: red;  
}

To explore the elements you want to style we recommend using the browser inspector.

Changing the position of the Client Portal Widget

In addition to controlling the style of the Client Portal Widget UI elements you can also control their layout. The Client Portal Widget 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 may want to align the Client Portal Widget and / or the floating actions -

/* Move the LiveSite Invite to the left */
body #livesite_active_engage.ls-desktop,
body #livesite_engage_button.ls-desktop {
  /* Move to the left */
  right: auto;
  left: 0px;

  /* The margin controls the distance from left */
  margin: 10px 10px 0 80px; 
}

/* Move the LiveSite Floating actions to the left */
body #livesite_action_buttons.ls-desktop {
  left: 0px;
  right: auto;
}

body #livesite_action_buttons.ls-desktop .ls-action > span {
  right: auto;
  left: 50%;
}

body #livesite_action_buttons.ls-desktop .ls-action > span em {
  left: 10px;
  right: auto;
}

/* Need to fix the animations */

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 Client Portal Widget

The Client Portal Widget inline actions theming can be done only using CSS, the following code shows how to control the entire coloring of the inline actions -

/* Change the background color of the inline actions pane */
body #livesite_active_engage .ls-inline-actions {
  background-color: #EBEBEB;
}

/* Change the color of all the text below the actions */
body #livesite_active_engage .ls-action-C .ls-action-text {  
  color: #0A0A0A;
}

/* Change the color of all the text below the actions */
body #livesite_active_engage .ls-action-C .ls-action {
  color: #FBFBFB;
  background-color: #207622;
}

/* Change the actions icon hover color */
body #livesite_active_engage .ls-inline-actions .ls-action:hover {
  color: #FBFBFB;
}

/* Change the color of the 3-dots more icon */
body #livesite_active_engage .ls-action-C .ls-action.ls-my-account:before {
  color: #0A0A0A;
}

/* Change the color of the My Account action */
body #livesite_active_engage .ls-action-C .ls-action.ls-my-account {
  background-color: #333;
}

body #livesite_active_engage .ls-action-C .ls-action.ls-my-account:before {
  color: #FBFBFB;
}

Still missing customizations?

We are currently in the process of building a snippets library. Don't hesitate to contact our Support for more information.