...
The login page is fully customizable where the complete page can be changed to match your companys profile.
Using custom themes
Overview
...
| 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
] |
...
css/
This folder contains css files used by the default template theme.
...
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.
...
Theme package property hooks/placeholders
All css/less/html/text files have support for placeholders which allow a theme package to load properties from the property provider pipeline. The format is as defined below. Not that it can be surrounded by comments /* */ and still be replaces and uncommented. The reason is that it shall be valid Sass or Less etc.
The format is {=property|property-key-here|default-value-here}
| Code Block | ||
|---|---|---|
| ||
/* background-color: {=property|theme.banner-background-color|#005f65}; */
background-color: {=property|theme.banner-background-color|#005f65};
/* color: {=property|theme.banner-color|#005f65}; */
color: {=property|theme.banner-color|#005f65};
any-prop: {=property|custom-name|default-value-if-not-exist};
{=property|custom-name|default-value-if-not-exist}; |