Fonts and Colors Overview

In Emplifi Agent, the administrator has a great deal of flexibility and control over the appearance of items on the screen. It is possible to modify window layouts to add, move, rename, and remove fields (this is discussed in the Layout Editor Overview topic). But it is also possible to make simpler changes such as changing font sizes and colors.

Emplifi Agent uses "cascading style sheets" to specify the colors of almost all screen elements. This section of the Administrator's Guide will walk you through the basic information you need to be able to effectively use style sheets with Emplifi Agent.

Cascading style sheets are a standard method used on most websites. If you want to find more detailed information on editing and using style sheets, use your preferred search engine to turn up many possibilities.

Style Sheet Names

Cascading style sheets are simple text files that end with a .CSS extension. You can edit them using Notepad, or any other text editor that you may have at your disposal. Many HTML editors will also allow you to edit .CSS files.

In Emplifi Agent, there is a default style sheet located in the top-level folder of the website. Its name is "default.css." This file contains a complete list of the styles that are used by all the screens in Emplifi Agent.

Sections Within a Style Sheet

The CSS syntax is made up of three parts: a selector, a property, and a value:

  selector
  {
      property1: value;
      property2: value;
      property3: value
  }

The selector is normally an HTML tag, or a class name. The properties are attributes that can be assigned to the tag. Each property and value pair must be separated by a semicolon, but there should be no semicolon after the last one. All the properties are contained between two curly braces. There is no requirement that all this information be on multiple lines, but it is usually done this way by convention to make it easier to read.

Here is an example of a style for the standard HTML Heading 1 (h1) tag:

  h1
  {
      text-align: center;
      color: black;
      font-family: arial
  }

Overriding Default Styles

If you want to override any of the default settings, you should not modify the default.css file. Any changes you make directly to this file will be lost the next time you upgrade, and the file is overwritten. Instead, you will create a new file that contains just the elements you want to override.

Styles can be overridden at any of the following levels:

• For all users

• For a specific configuration

• For a specific company

• For a specific company and configuration combination

In each case, the style sheet will follow this general naming convention:

defaultCcompanyGconfiguration.css

The following chart gives an example of the file name that would be used in different situations. 

Style sheet names are case sensitive, so the files need to be named exactly as listed in the table above. If an error is made, it may be necessary to update the CustomFiles.js file in the Emplifi Agent\Cache folder manually to reflect the change before renaming the style sheet.

If multiple style sheets exist, precedence goes from the most specific to the least specific (i.e. the reverse order listed in the above table).

When you create a new file to override styles, you do not need to copy all the styles from the standard default.css file. Instead, you should copy just those elements that you plan to override. You could then change the color and background color using values from the color chart.