Page Comparison

...

The CSS files in the default theme package (that can be downloaded) includes comments that describes the rules. But you will probably also need to inspect a live installation with e.g. Firebug or Chrome developer tools to get a complete understanding of the theme resource usages.

config/

Anchor
config config

This folder contains theme resources that are not regular web resources e.g. CSS or JavaScript files. See the descriptions for each file for information about how it is used.

ui_colors.json

Anchor
ui_colors.json ui_colors.json

This file is in JSON format and contains an array of objects that has a Key, a MainRgb and a SecondRgb property. Each of these properties is mapped to different formating settings server side. The key describes their usage e.g. ui.chart.color.Red contains the RGB colors for all red chart elements. You can change these RGB values to map the theme palette to a color scheme that matches your theme.

ui.chart.color.XXXX is the chart colors in the web user interface.
export.color.XXXX is the colors used in the Excel exports (xlsx and xls).

...

/* Color name ref: http://msdn.microsoft.com/en-us/library/system.drawing.color.aspx
The colors should be in the format RGB (hex) or named ex: Blue or LightGreen
*/
[
/* These colors is used for the charts in the UI */
{"Key": "ui.chart.color.Yellow","MainRgb": "#FFD700","SecondRgb": "#FFFF00"},       /* Gold-Yellow */
{"Key": "ui.chart.color.Green","MainRgb": "#228B22","SecondRgb": "#32CD32"},        /* ForestGreen-LimeGreen */
{"Key": "ui.chart.color.Orange","MainRgb": "#FF8C00","SecondRgb": "#FFA500"},       /* DarkOrange-Orange */
....Stripped for brevity

/* These colors is used for the exports exports */
{"Key": "export.color.HeaderRow_MainColor","MainRgb": "#E4E4E5"},
{"Key": "export.color.HeaderRow_SubColor","MainRgb": "#FFFFFF"},
{"Key": "export.color.HeaderRow_BottomBorderColor","MainRgb": "#A9A9A8"},
{"Key": "export.color.HeaderRow_ColumnSeparatorColor","MainRgb": "#CFCFD0"},
{"Key": "export.color.ContentRow_AlternateRowBackgroundColor","MainRgb": "#FFFFC5"},
{"Key": "export.color.CallSpecification_IncomingAnsweredColor","MainRgb": "#C5E28A"},
{"Key": "export.color.CallSpecification_IncomingAbandonedColor","MainRgb": "#FFA697"},
{"Key": "export.color.CallSpecification_OutgoingAnsweredColor","MainRgb": "#99BBD7"},
{"Key": "export.color.CallSpecification_OutgoingAbandonedColor","MainRgb": "#FFCA89"},
{"Key": "export.color.CallSpecification_IncomingBackgroundColor","MainRgb": "#FFFFFF"},
{"Key": "export.color.CallSpecification_OutgoingBackgroundColor","MainRgb": "#E6E6E5"},
{"Key": "export.color.Comment_BackgroundColor","MainRgb": "#FAFAFB"},
{"Key": "export.color.Comment_LineColor","MainRgb": "#A9A9A8"},
{"Key": "export.color.ColumnDescriptions_ContentBackgroundColor","MainRgb": "#FFFFFF"},
{"Key": "export.chart.color.Green","MainRgb": "#00CC00"},
{"Key": "export.chart.color.Blue","MainRgb": "#79BCFF"},
....Stripped for brevity
]

css/

This folder contains css files used by the default template theme.

base.css

Anchor
base.css base.css

This is the main CSS file that is included on every page.

login_page.css

Anchor
login_page.css login_page.css

This CSS file is included on the login page and can be used to customize the login user interface. Unlike the other pages in the system this page is fully customizable and all layout css is included in this file.

help_popup.css

Anchor
help_popup.css help_popup.css

This CSS file is included in all popup windows e.g. help popups.

images/

Anchor
images images

This folder contains all images and icons for the theme. The name of the image contains a size and short description. Use e.g. Firebug to find out what a particular image in the default theme is named.

favicon_default.ico

This .ico image is used as a favicon in the browsers that support favicons.