Using CSS

The style and layout of Sales-n-Stats 'Live Communication' dialogs and popup windows can be controlled using CSS (Cascading Style Sheets). The styles defining how to display the elements of these dialogs and windows are stored in the external style sheet style.css. Modify this file to change colors, fonts, spacing and other properties.

Note:

By default style.css is located in the directory {CollectorRoot}/templates/default defining the look of elements assembled from the default template set. As it is not recommended to modify the files of the default template set, make a copy of the default template set (including style.css) and save it to a separate folder within the directory {CollectroRoot}/templates (for example, {CollectorRoot}/templates/my_templates). Then you will be able to edit the file style.css for your sites template set.

The file style.css consists merely of style rules in the format of selector {property: value}

The selector is the HTML element/tag being defined, the property is the attribute which can be changed, and the value is the value this property can take. The property and value are separated by a colon and surrounded by curly braces. If more than one property is specified, each property is separated with a semi-colon. The example below shows how the look of a link is defined:

When more than one selector use the same style definition, the selectors may be grouped:

{
        FONT-SIZE: 13px;
        COLOR: #000000;
        FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
}

If the tag name in the selector is omitted, it means the style is used by all HTML elements that have this class. In the example below, all HTML elements with class="sns_WindowBack" have a white background color:

Generally speaking, find out the style of any HTML element by the class attributed to it. For example, to know what style rules regulate the appearance of the dialog title, find the template that defines the look of the dialog header and find in this template the lines defining the look of the title. There will be an indication of the class attributed to the dialog title element.

The name of the header template is header.inc. Open it and find the following lines:

{Subheader}
<TR valign="middle"><TD>
<DIV ID="dialogTitle" class="sns_Header" align="center" style="padding: 20px">{Title}</DIV>
</TD></TR>

The fragment class=sns_Header means that the title follows the rules in the ".sns_Header" selector. Now open the file style.css and find the appropriate style definition:

.sns_Header {
        font-size: 13pt;
        font-weight: bold;
        font-family: Verdana;
        color: black;
}

Knowing the properties of the dialog title element, you can modify the look of text appearing in the title. Before any modifications are made to the file style.css, the dialog 'Start communication': Open chat with operator looks like this:

'Start communication': Open chat with operator dialog.

.sns_Header {
        font-size: 20pt;
        font-weight: bold;
        font-family: Verdana;
        color: red;
}

'Start communication': Open chat with operator dialog: font size - 20pt; text color - red.