Skip to main content

Custom CSS Styles

Mango's User Interface is 100% HTML based, which means you can apply CSS classes to customize the style of your pages or even override the style of the Mango UI itself. There are two primary approaches: applying global styles that affect all pages, and adding CSS to individual custom pages.

Applying Global Styles​

If you wish to add CSS that can affect elements on multiple pages, or the Mango UI itself, you should use the User stylesheet URL setting.

Setting Up a Global Stylesheet​

  1. Navigate to the UI Settings page (found under Administration in the menu).

  2. Scroll down to the Miscellaneous settings section.

  3. Click the paper clip icon on the User stylesheet URL input.

  4. The Choose file dialog will open. Click the plus icon to add a new file and give it a name such as custom.css.

  5. Enter your CSS code in the file editor. For example, to import a Google Font and use it to style page headers:

@import url('https://fonts.googleapis.com/css?family=Bubbler+One');

h1, h2, h3, h4, h5 {
    font-family: 'Bubbler One', sans-serif;
}
  1. Click the Save icon to save the file, then click OK on the file dialog.
  2. Click Save at the top of the UI Settings page to apply the User stylesheet.

After this initial setup, you only need to save custom.css and refresh your page for modifications to take effect.

The Mango UI with custom Google Font applied to page headers

Common Global CSS Customizations​

Here are some commonly applied global CSS overrides:

/* Change the sidebar menu background color */
ma-ui-menu md-sidenav {
    background-color: #263238;
}

/* Customize the header bar */
.ma-header-bar {
    background-color: #37474F;
}

/* Change the default font for the entire application */
body {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
}

/* Style all data point value displays */
ma-point-value .ma-point-value-value {
    font-size: 1.2em;
    font-weight: bold;
}

Using Chrome DevTools​

A very helpful tool for developing CSS customizations is the Developer Tools built into the Chrome browser. Right-click any element on the page and click the Inspect option.

The Elements tab of the Developer Tools opens, allowing you to make CSS changes right in your browser with changes updating live on the page. This is invaluable for:

  • Identifying CSS selectors -- Determine the exact class names and element hierarchy you need to target.
  • Testing changes in real time -- Modify CSS properties and see the effect immediately without saving or refreshing.
  • Debugging specificity issues -- See which CSS rules are being applied, overridden, or ignored.

After finding the CSS values you want, copy them into your User stylesheet or custom page styles.

Adding CSS to a Custom Page​

You can also add CSS to a single custom page by adding a <style> tag containing your CSS to the HTML markup of your page. If you are using the Dashboard Designer, you can edit the HTML by toggling the Edit markup switch.

Here is an example that changes the color and font weight of <ma-point-value> component labels on a specific page:

<div class="ma-designer-root" style="width: 1024px; height: 768px; position: relative;">
    <ma-point-value style="position: absolute; left: 116px; top: 143px;"
        point="designer.points | filter:{name:'Temperature'}:true | maFirst"
        label="Zone A:" class="red">
    </ma-point-value>
    <ma-point-value style="position: absolute; left: 146px; top: 223px;"
        point="designer.points | filter:{name:'Humidity'}:true | maFirst"
        label="Zone B:" class="blue">
    </ma-point-value>
</div>

<style>
    ma-point-value.red label {
        font-weight: bold;
        color: red;
    }
    ma-point-value.blue label {
        font-weight: bold;
        color: blue;
    }
</style>

When to Use Per-Page vs. Global CSS​

ApproachUse When
Global stylesheetYou want consistent branding across all pages, or you need to override Mango UI default styles.
Per-page <style> tagYou want styles specific to one dashboard that should not affect other pages.
Inline ng-styleYou want to dynamically change styles based on data point values. See Styling with Data.

CSS Tips for Mango Pages​

  • Use the !important declaration sparingly. Angular Material uses high-specificity selectors, so you may occasionally need !important to override them, but prefer increasing specificity first.
  • Leverage Material Design color classes. Angular Material provides built-in classes like md-primary, md-accent, and md-warn that use the current theme palette.
  • Test responsive behavior. Use Chrome DevTools device emulation to verify that your CSS works across different screen sizes.
  • Avoid modifying component internals. Angular Material components may change their internal DOM structure between versions. Target stable class names and component-level selectors when possible.