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.

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. You will first need to go to UI Settings page which can be found under the Administration section of the menu on your Mango system. Scroll down to the Miscellaneous settings section and click the paper clip icon on the User stylesheet URL input.

The Choose file dialog will open and you will then want to click the plus icon to add a new file. Give it a name like custom.css. You can use the following code to import a Google Font and use it to style the page headers.

@import url('https://fonts.googleapis.com/css?family=Bubbler+One');
h1,h2, h3, h4, h5 {
font-family: 'Bubbler One', sans-serif;
}

After you are done editing your CSS code you will want to click the Save icon to save the file, then click OK on the file dialog. You should then see the file selected in the User stylesheet URL input as shown.

You will also need to click Save at the top of the UI Settings page to apply the User stylesheet. After this is done the first time you will only need to save custom.css and refresh your custom page for modifications to take effect.

After refreshing, you should be able to see your custom CSS taking effect on the application.

You should be able to use this method to override any of the styles on the web app.

Using Chrome's Developer Tools

You may find it helpful to debug and modify CSS this way and then copy in the desired CSS values into the User stylesheet.

Adding CSS to a Custom Page

Here is a code example that shows how CSS was added to the HTML of a dashboard designer page to change the color and font weight of <ma-point-value> component's labels:

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="65b5ef7f-1b7b-4a57-9870-fba8536ce5ce" watch-list-xid="WL_658356"></ma-watch-list-get>
<div class="ma-designer-root" id="ab3cc8ca-8531-4fa0-b902-bddccc4f4a22" style="width: 1024px; height: 768px; position: relative;"><ma-point-value id="88a3c2e2-ede8-495f-bef5-44c8b2f1e8ce" style="position: absolute; left: 116px; top: 143px;" point="designer.points | filter:{name:'Millivolts'}:true | maFirst" label="jsjsj:" class="red"></ma-point-value>
    <ma-point-value id="8c3562ea-5630-44f6-b166-84d0b3179696" style="position: absolute; left: 146px; top: 223px;" point="designer.points | filter:{name:'Millivolts'}:true | maFirst" label="jsjsj:" class="blue"></ma-point-value>
    <ma-point-value id="8bbc4186-fd05-4d81-bf29-c1fe5e951afa" style="position: absolute; left: 136px; top: 473px;" point="designer.points | filter:{name:'Millivolts'}:true | maFirst" label="jsjsj:"></ma-point-value>
    <ma-point-value id="e13747b1-679e-40ee-acf2-db69ca6a1d0e" style="position: absolute; left: 196px; top: 353px;" point="designer.points | filter:{name:'Millivolts'}:true | maFirst" label="jsjsj:"></ma-point-value>
    <ma-point-value id="6d44e32f-e16a-44bb-a3d6-711f09efa3e9" style="position: absolute; left: 297.094px; top: 303px;" point="designer.points | filter:{name:'Millivolts'}:true | maFirst" label="jsjsj:"></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>