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.

 
Screen Shot 2017-09-26 at 4.01.58 PM.png
 

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.

 
Screen Shot 2017-09-26 at 4.10.14 PM.png
 

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

 

Using Chrome's Developer Tools

Screen Shot 2017-09-26 at 4.29.05 PM.png

A very helpful tool to use is the Developer Tools built into the Chrome Browser. Right click any element on the page and click the Inspect option.

The Inspect Elements tab of the Developer Tools will open allowing you to make CSS changes right in your browser, with changes updating live on the page.

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

Screen Shot 2017-09-26 at 4.40.14 PM.png

You can also just 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 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>