Search

Advanced Widget Customization Options for Web Developers

Please note: This article is provided for educational purposes only! Keep in mind that your setup may look different than the one pictured. vcita will not support custom code or implement code on your website. If you do need more help, we recommend reaching out to a certified web development professional.

This article includes the following sections:

CSS Intro

Cascading Style Sheets (or CSS) is code used to change the design of a webpage. It has the capability to change the color, size and position of an element on your webpage. vCita uses CSS to design and position the LiveSite widget. This cookbook is the recipe for you to work with our CSS.

Using this guide -

CSS is made up of many rules, selectors and declarations. Basically, CSS targets an element and then tells it what color it should be, where it should be, and how big it should be. Each CSS rule follows this format –   

<selector> {
    declaration: <value>;
}

For example, this rule will make your page’s background-color black  –

html{
    background-color: black;
}

In this guide, we help you customize the vCita CSS by letting you know the selector that targets an element then letting you know the rules to add to the selector.

 

Adding CSS to your Webpage

Method 1 (CSS File)

Step 1 - Find your webpages CSS file

Step 2 - Add the CSS rules at the bottom of the file

 

Method 2 (HTML File)

Step 1 – Insert your CSS rules where it says, “add CSS rules here”.

<style media="screen" type="text/css">

    <add CSS rules here>

</style>

For this guide, we choose to use the CSS rules that allow us to move the LiveSite’s Position.

<style media="screen" type="text/css">

    body #livesite_active_engage.ls-desktop,

    body #livesite_engage_button.ls-desktop{

         margin: 10px 10px 0 80px;

         right: auto;

         left: 0px;

    }

</style>

Step 2 – Open your HTML file. An HTML File should be structured as such –

<html>
    <head>
        <insert your "<style>" tags here>
    </head>

    <body>
    </body>
</html>

Insert your styles tags where it says, “insert your ‘<style>’ tags here”.

Final Code -

<html>
    <head>
        <style media="screen" type="text/css">
           body #livesite_active_engage.ls-desktop,
           body #livesite_engage_button.ls-desktop{
               margin: 10px 10px 0 80px;
               right: auto;
               left: 0px;
           }
       </style>

    </head>

    <body>
    </body>
</html>

 

Customizing the Position of the LiveSite Invite

Result –

MoveLS.png

Final Rule Used –

body #livesite_active_engage.ls-desktop, body #livesite_engage_button.ls-desktop{
    margin: 10px 10px 0 80px;
    right: auto;
    left: 0px;
}

Selector -  

body #livesite_active_engage.ls-desktop, body #livesite_engage_button.ls-desktop{

}

Step 1 – Decide if you want the LiveSite Invite to be on the right, left side or center.

If you want it to be on the right or center, don’t add a rule to the selector.

If you want it to be on the left, add these rules to the selector –

right: auto;
left: 0px;

Step 2 – Decide how far to the left or right you want the LiveSite invite in pixels. We recommend 80 pixels.

Step 3 - Change “<your value here>” to the number of pixels to how far to the left or right you want the LiveSite invite.

margin: 10px 10px 0 <your value here>;

For this article, we chose 80 pixels.

margin: 10px 10px 0 80px;

Step 4 – Add this declaration to the selector.

Final CSS Rule–

body #livesite_active_engage.ls-desktop, body #livesite_engage_button.ls-desktop{
    margin: 10px 10px 0 80px;
    right: auto;
    left: 0px;
}

 

Disable the LiveSite Tab & Invite

Result –

Capture.JPG

 

CSS Declaration –

body #livesite_engage_button{
    display: none;

}

body #livesite_active_engage {
    display: none;
} 

Customizing the Position of the LiveSite Floating Menu

Result –

Floatingmenu.png

Final Rule Used –

body #livesite_action_buttons.ls-desktop {

    top: 150px;

}

Selector -  

body #livesite_action_buttons.ls-desktop {

}

Step 1 – Decide how far down you want the LiveSite floating menu in pixels. We recommend you use 150 pixels.

Step 2 - Change “<your value here>” to the number of pixels desired.

top: <your value here>;

For this article, we chose 150 pixels.

top: 150px;

Step 3 – Add this declaration to the selector.

Final CSS Rule–

body #livesite_action_buttons.ls-desktop {

    top: 150px;

}

 

Customizing the Inline Menu on the LiveSite Invite

Result -

Customizeinlinemenu.png

Final Rules Used –

body #livesite_active_engage .ls-inline-actions{
    background-color: #EBEBEB;
}

body #livesite_active_engage .ls-action-C .ls-action-text{
    color: #0A0A0A;
}

body #livesite_active_engage .ls-action-C .ls-action,
body #livesite_active_engage .ls-inline-actions .ls-action:hover{
    color: #FBFBFB;
    background-color: #207622;
}

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;
}

Customizing the Background Color of the Inline Menu

pic1.png

Selector –

body #livesite_active_engage .ls-inline-actions{
}

Step 1 – Decide on the color you would like for the background of the Inline Menu.

Step 2 (RGB) – Convert your RGB color to Hex Value using http://www.javascripter.net/faq/rgbtohex.htm

Step 2 (white, blue, orange, ect) – Find a color on this chart http://www.w3schools.com/html/html_colornames.asp. Write down the Hex Value associated with your color. 

Step 3 – Create the CSS rule. Change “<add your color here>” to your Hex Value.

background-color: <add your color here>;

For this article, we #EBEBEB (Off-White Grey);

background-color: #EBEBEB;

Step 4 – Add your declaration to the selector.

Final CSS Rule –

body #livesite_active_engage .ls-inline-actions{
    background-color: #EBEBEB;
}

Customizing the Color of the Text

pic2.png

Selector –

body #livesite_active_engage .ls-action-C .ls-action-text{
}

Step 1 – Decide on the color you would like for the text inside of the Inline Menu.

Step 2 (RGB) – Convert your RGB color to Hex Value using http://www.javascripter.net/faq/rgbtohex.htm

Step 2 (white, blue, orange, ect) – Find the color on this chart https://www.w3schools.com/colors/colors_names.asp. Write down the Hex Value associated with your color. 

Step 3 – Create the CSS rule. Change “<add your color here>” to your Hex Value.

color: <add your color here>;

For this article, we chose #0A0A0A (Off-Black Grey);

color: #0A0A0A;

Step 4 – Add your declaration to the selector.

Final CSS Rule–

body #livesite_active_engage .ls-action-C .ls-action-text{
    color: #0A0A0A;
}

Customizing the Icon’s Background Color and the Icon Color

pic3.png

Selector –

body #livesite_active_engage .ls-action-C .ls-action,
body #livesite_active_engage .ls-inline-actions .ls-action:hover{
}

Step 1 – Decide on two colors for the Icon’s Background and the Icon.

Step 2 (RGB) – Convert your RGB colors to Hex Values using http://www.javascripter.net/faq/rgbtohex.htm

Step 2 (white, blue, orange, ect) – Find the colors on this chart http://www.w3schools.com/html/html_colornames.asp. Write down the Hex Values associated with your colors. 

Step 3 – Create the CSS rule.

Change “<add your icon color here>” to your Hex Value for your Icon color.

Change “<add your icon background color here>” to your Hex Value for your Icon’s background color.

color: <add your icon color here>;
background-color: <add your icon background color here>;

For this article, we chose #FBFBFB (Off-white) for our Icon color and #207622 (Dark Green) for our Icon Background Color.

color: #FBFBFB;
background-color: #207622;

Step 4 – Add your declaration to the selector.

Final CSS Rule–

body #livesite_active_engage .ls-action-C .ls-action,
body #livesite_active_engage .ls-inline-actions .ls-action:hover{
    color: #FBFBFB;
    background-color: #207622;
}

Customizing the Login Icon’s Background Color

pic4.png

Selector –


body #livesite_active_engage .ls-action-C .ls-action.ls-my-account{
}

Step 1 – Decide on the color you would like for the login icon background color.

Step 2 (RGB) – Convert your RGB color to Hex Value using http://www.javascripter.net/faq/rgbtohex.htm

Step 2 (white, blue, orange, ect) – Find the color on this chart http://www.w3schools.com/html/html_colornames.asp. Write down the Hex Value associated with your color. 

Step 3 – Create the CSS rule. Change “<add your color here>” to your Hex Value.

background-color: <add your color here>;

For this article, we chose #333 (Dark Grey);

background-color: #333;

Step 4 – Add your declaration to the selector.

Final CSS Rule –


body #livesite_active_engage .ls-action-C .ls-action.ls-my-account{
    background-color: #333;
} 

Customizing the Login Icon Color

pic5.png

Selector –


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

Step 1 – Decide on the color you would like for the Login Icon.

Step 2 (RGB) – Convert your RGB color to Hex Value using http://www.javascripter.net/faq/rgbtohex.htm

Step 2 (white, blue, orange, ect) – Find the color on this chart http://www.w3schools.com/html/html_colornames.asp. Write down the Hex Value associated with your color. 

Step 3 – Create the CSS rule. Change “<add your color here>” to your Hex Value.

color: <add your color here>;

For this article, we chose #FBFBFB (Off-White Grey);

color: #FBFBFB;

Step 4 – Add your declaration to the selector.

Final CSS Rule –


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

Was this article helpful?