Customizing Style

The SNMD UI loads additional CSS definitions from css/local.css. This allows customizing the layout of widgets using CSS selectors.

The following example uses the Class-State widget type from the snmd-widgets-nagios library and changes the stroke color of the state OK to DarkBlue:

widget configuration

{
    "type": "Nagios:Class-State",
    "bcls": [
        "snmd-bcl-opacity-stroke", "my-bcl-test"
    ],
    "clrsty": [
        "stroke"
    ],
    "topics": [
        "nagios/checks/foo.demo.lan/Service Test"
    ]
}

css/local.css

.snmd-bcl-opacity-stroke.my-bcl-test.snmd-scl-0 {
    stroke: DarkBlue;
}

Hint

Remember that SVG elements have some custom CSS attributes. You need to use the stroke and fill properties to change their color, they do not have a color or background property. An overview of styling properties can be found in the Scalable Vector Graphs W3C Recommendation.