Page Comparison

...

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.

config/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).

Not all keys uses both MainRgb and SecondRgb, if a SecondRgb is requested on the server side but not defiend the MainRgb is used. 

/* 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.

css/base.css

Anchor
base.css base.css

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

css/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.

css/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.

images/favicon_default.ico

Anchor
favicon_default.ico favicon_default.ico

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

scripts/

Anchor
scripts scripts

This folder contains script files used by the theme.

scripts/login_page.js

Anchor
login_page.js login_page.js

This javascript file is included on the login page and can be used to customize the DOM with e.g. JQuery.

telerik/

Anchor
telerik telerik

...

The telerik control styling is described at http://www.telerik.com/help/aspnet-ajax

telerik/common/

Contains common resources for the Telerik controls

telerik/css/

This folder contains CSS files that control the apperance of serveral UI components e.g. the menu. Each CSS file is named ControlType.Metro.css. So if you want to change the apperance of the menu you should edit the file Menu.Metro.css

telerik/metro/

This folder contains other resources that the telerik controls depend on, each control has a sub folder with the name ControlType so if you want to edit any images used in the menu go to the subfolder Menu and make your changes to the image there.