...
- Logotypes
- Fonts
- UI colors
- Icons
- Page sections/containers
- Menus (only apperance not content)
- Report chart colors
- XLSX / XLS exported charts colors
- XLSX / XLS Call specification export
- Module names (multi language support)
- Report names (multi language support)
- Subscriber Measurement object type names (multi language support)
- Link URLs (e.g. support link)
- Help section iFrame content
...
So if you need to include a custom image (images/custom/myimage.png) and use it from a CSS rule in e.g. base.css you can defined it as below and the theme handler will take care of the the rest.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
.informationDiv
{
background-image: url('Theme.ashx?images/custom/myimage.png');
} |
The Theme.ashx supports localized resources by replacing the resource path placeholder values {lang-culture} and {lang} with the current culture. Ex: when the page is in swedish the place holder {lang-culture} will be replaced with sv-SE and {lang} will be replaced with sv if it exist within the resource path. The used language is loaded from the request cookie MERIDIXSTUDIO.language [value: lang].
If a resource is localized the theme package must contain a resource for each of the activated languages in the system or else an theme resource exception will be thrown when trying to load an non existing localized resource.
*This feature is only available from version 3.7 and later.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
.informationDiv
{
background-image: url('Theme.ashx?images/custom/myimage_{lang-culture}.png');
// Is translated to Theme.ashx?images/custom/myimage_sv-SE.png on the server side if the current culture is set to sv-SE
background-image: url('Theme.ashx?images/custom/myimage_{lang}.png');
// Is translated to Theme.ashx?images/custom/myimage_sv.png on the server side if the current culture is set to sv-SE or a neutral sv culture
} |
...
| Info |
|---|
There is a user interface for editing the JSON data at http://lab.meridix.se/colortweaker/ |
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
/* 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
] |
...