Setting the background colour of a Widget
Estimated Completion Time: 5 Mins
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.
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: