Custom CSS

The CSS editor field lets you add your own CSS to customize the look and feel of your dashboards. Use the combo to select an existing CSS class to modify.

Examples

Change widget header

.srn-widget-header {
    background-color: grey;
    color: #e19500;
}

Remove horizontal margins in the viewer

.srn-viewer-container {
    width: 100%;
    padding-left:0;
    padding-right:0;
}

Do not modify the Serenytics CSS

By default, if you modify a css style, this modification can modify the Serenytics studio application. For example, if you modify the style of the th property, this will modify all the tables, everywhere in the Serenytics studio, which is not a good idea.

To avoid this issue, try to be as specific as possible with the CSS selectors. A good practice is to limit your changes to properties inside the srn-dashboard-wrapper class. Instead of modifying the property th, you must modify the property .srn-dashboard-wrapper th. This will only modify th properties which are inside the dashboard, and not the whole Serenytics application.