Objective: To demonstrate some of the things that can be changed with the Overrides.css file Keep in mind not everything can be changed at this moment, but this should be able to give a user some ideas on what can be done. Also this article will not cover everything that can be changed, but some of the more common ones. As with anything, please test after making changes to make sure it doesn’t have any odd effects on other parts.
Prerequisites: Basic Knowledge of CSS. Also i would familiarize yourself with using Chrome or other browsers inspection features to discover other items you can change.
Quick word of caution. Css classes in the Portal may change from version to version. This article was written with Live Maps V8.3. Also it is starting with the Blue(Default) Theme enabled. Display each element as i worked through them, but you may find it easier to start with a dark or light theme. that may reduce the number of items you need to change.
To locate the Overrides.css file, browse to the location where the website is stored. Because this can change from install to install, recommend using IIS Manager to discover this. Right click on the Live Maps Unity Portal website or application and click on explore. The overrides.css file is located in the “Content” subfolder. Example, if you installed the Live Maps Unity Portal as a child application of the Default Website, then this is typically located in “C:\inetpub\Live Maps Unity Portal\Content”. A sample Overrides file is located at the bottom of this article.
/* Changes the color of the body.
This will affect the background on the login screen as well as the oulines and footer */
body {
background: #0b0b0c; –
}
/* Widget changes the color of most of the widget squares in the portal
Also affects Services Overview, System, and Summary Dashboard pages*/
.widget {
background: #202739;
}
/* Changes the color for the tile on the Home page around the Live Maps lable.
Also changes color for the Custom Dashboard page as well as some widgets on the
Summary Dashboards, like the Performance graphs */
.widget-content-noscroll {
background: #495156;
}
/* Changes color around the Recently Viewed and Resources Tiles */
.widget.nobg{
background: #495156;
}
/* Changes the color for the widget tiles on the home page. Also a couple other small areas */
/* Changes the color of the Widget title bar on both System and Summary Dashboards */h1.widget-title {
background: #91413c;
}
/* Changes the color of the tile on the Peformance Graph Widget */
.performance-graph-container {
background: #202739
}
/* Changes the color of the Navigation bar */
