dashing.io – Change Meter Colour

If you want to change the dark purple background that makes up part of the meter on dashing.io you may be surprised to find it’s not as easy as you might expect; it certainly took me a while to unpick it. I’ve adapted the method since I first did it now taking advantage of the opacity option in CSS rather than specify a specific colour.  If you want to change the colour of your meter so it uses the widget background colour, this is what you need to change.

Towards the top of your .erb file, add the following:

.customcolour-widget, .customcolour-widget input.meter {
 background-color: rgba(255, 255, 255, .3);

All we’ve done here is create a custom class .customcolour-widget and then set the background colour to white with an opacity of .3.  Next you need to tell the widget with the meter to use this class as well as using an inline style to set your preferred background colour for the widget:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="customcolour-widget">
<div data-id="SomeWidgetID" data-view="Meter" data-title="Active Tickets" data-min="0" data-max="800" style="background-color: rgba(255, 0, 0, 1);"></div>

Now you’re all set.