Styling with CSS

Other than JavaScript or HTML (for templates), a component definition may also include a CSS that can be used to control how the component is visualized in the page.

Within the CSS editing page, you can define the set of rules that must be loaded together with the component. In addition, if needed, you can also redefine rules for mobile navigation.

Instead of using the global application CSS, you can configure it in the Appearance page. We suggest you leave all the CSS rules related to a specific component directly in the component definition.

How to write CSS rules?

In case you are defining rules for a WIDGET component, a good practice is to prefix all rules with the widget tag.

Below you can see the CSS rules for a widget with machine-status-widget tag.

machine-status-widget .diagram {
    width: 100%;
    background-color: #D2D2D2;
}

machine-status-widget .span {
    color: #888888;
}

When defining a FILTER, in the result value, you can create HTML using inline style attributes or classes.
In this case, you can define your classes with a specific name.

Below you can see the CSS rules for a filter that displays an icon for a status code rendered through the following output.

CSS

HTML

Filter JavaScript

.machine-status.success {
   color:green;
}

.machine-status.error {
   color:error;
}

let status = (value == 'abc') ? "success" : "error";
return '<div class="machine-status ' + status + '">' + status.toUpperCase() + '</div>';

<div class="machine-status success">SUCCESS</div>
<div class="machine-status error">ERROR</div>

In case you are editing a TEMPLATE, into the HTML, you can use CSS classes with specific names.

Below you can see the CSS rules for a template that displays the machine productivity.

CSS

HTML

.productivity-template value-widget .card {
   border:solid 2px green;
}

.productivity-template time-series-chart-widget .card {
   max-width:400px;
}

<div class="d-flex flex-wrap components-row productivity-template">
	<value-widget [title]="'Number of Pieces'">
		<metric name="nr_pieces"></metric>
	</value-widget>
	<time-series-chart-widget [title]="'Number of Pieces'">
		<metric name="nr_pieces"></metric>
	</time-series-chart-widget>	
</div>