Profile photo of adamsmith

About adamsmith

Work at NetNow as a IT Consultant, Pre-Sales Engineer and Trainer. In my spare time I keen runner, swimmer and triathlete.

Adam SmithUsing CSS with Widgets

Setting the background colour of a Widget

Difficulty: BASIC

Estimated Completion Time: 5 Mins

Version 1.8+

Setting the background colour of a Widget

In this simple tutorial, you will learn how to set the background colour of a widget using CSS. CSS can be used to style the widgets appearance in many different ways and this tutorial is designed to introduce you to the concepts and show how to get them working. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Add a Widget to change the background colour

Add a dynamic text box widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. From inside the Dynamic Text Box widget locate and press the edit text icon show below

You will now be presented with a text editor. While inside this editor add the words “Change My Color”  in large H1 font size and save the text.

Note: You can style your text using the FORMAT DROP DOWN in the BOTTOM LEFT CORNER OF THE EDITOR.


Step 2 – Add CSS to change the colour of the widget

To change the colour of the widget you will need to add the following code snippet in to the CSS Style Sheet property of your dashboard. This property is located in the edit dashboard window. To access the Edit dashboard window press the spanner in the top right hand corner of the dashboard builder screen.

[snippet id=”30″]


Scroll to the bottom and press update. You can now close the dialog. That’s all done! Now view your dashboard and see that the widget has changed colour!


For extra information, guidance and troubleshooting consult:


Leave a Reply