Disclaimer: This article is provided for instructional purposes only. vCita does not support or guarantee custom code.

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 –