...

The login page is fully customizable where the complete page can be changed to match your companys profile. 

...

Using custom themes

Overview

A theme in Meridix studio is a set of files (css, images, scripts) that is contained in a directory with a specific structure (see below). There is a default theme folder that the systems uses in no other theme is defined. If a custom theme is defined but a requiered resource is not included the system falls back on the default theme resource. This means that you can choose to only include the resources that you have changed in the theme structure.

...

Configure Meridix Studio to use a custom theme package

...

Theme packages and resources

The theme resource handler (Theme.ashx)

...

.informationDiv 
{
	background-image: url('Theme.ashx?images/custom/myimage.png');
}

...

Theme package structure

The theme package (zip file or folder) should be structured as below (see the individual folder/file descriptions in the next section)

...

• 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

Theme package resource descriptions

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

ui_colors.json

This file is an JSON array that......

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

base.css

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

...

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

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