Page Comparison

...

The theme package (zip file or folder) should be structured as below (see the individual folder/file descriptions in the next section).
You can add additional files and folders and make use of them through the Theme.ashx handler if needed, if a requiered file does not exist in a custom theme package the default theme resource is used. Its recommended to include all resources even the ones that hasent been changed from the default template in a custom theme since then the theme pipeline is not required to use the fallback mechanism.

• config
  • ui_colors.json
• css
  • base.css
  • login_page.css
  • help_popup.css
• images
  • favicon_default.ico
  • flag_eng.png
  • flag_swe.png
  • icon_{description}_{size}.png (multiple)
  • ....
  • load_animation_{description}.gif (multiple)
  • ....
• scripts
  • login_page.js
• telerik
  • common
    • grid
  • css
    • Calendar.Metro.css
    • ComboBox.Metro.css
    • Grid.Metro.css
    • Input.Metro.css
    • Menu.Metro.css
    • TabStrip.Metro.css
    • TreeView.Metro.css
  • metro
    • Calendar
      • sprite.gif
    • ComboBox
      • rcbSprite.png
    • Grid
      • AddRecord.gif
      • Cancel.gif
      • Delete.gif
      • Edit.gif
      • export.gif
      • Filter.gif
      • loading_small.gif
      • MoveDown.gif
      • MoveUp.gif
      • PagingFirst.gif
      • PagingLast.gif
      • PagingNext.gif
      • PagingPrev.gif
      • Refresh.gif
      • rgDrag.gif
      • SingeMinus.gif
      • SinglePlus.gif
      • SortAsc.gif
      • SortDesc.gif
      • sprite.gif
      • Update.gif
    • Input
      • sprite.gif
    • Menu
      • rmExpandArrows.png
    • TabStrip
      • TabStripStates.png
    • TreeView
      • LoadingIcon.gif
      • PlusMinus.png
      • TriState.png

...

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.

...

of the theme resource usages.

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.

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.XXXXtheme.

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

Anchor
base.css base.css

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

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.

Anchor
help_popup.css help_popup.css

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

...