Adam Smith

Using 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:

 

Centering content css

Centering content in the browser

Difficulty: Easy

Estimated Completion Time: 5 Mins

Version: 1.7+

In this tutorial we follow on from an earlier tutorial entitled tab-menus. We will build on this example by now centering the logo and menu system using CSS. You will first need to Login to the dashboard builder to start the tutorial.

Step1 – task is to assign both the widgets we want to center an equal width.

To do this first edit the dashboard from the earlier tutorial by locating it in the dashboard list. Once inside the edit session now locate and press the spanner icon for the logo widget [#widget1) and the tab menu widget (#widget2). While inside the edit properties dialog locate the width property and set its value to 1000. Now just press enter to save and close the dialog. Advanced users could also assign the width using CSS as follows.

[snippet id=”12″]

Step 2 – Now for the magic CSS!

To center the logo and menu system add the following code snippet to the bottom of the CSS Style sheet property. 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=”11″]

That’s all done. Please enjoy your new menu system! View the dashboard using the View dashboard button located in the top right section of the dashboard builder. Try and resize the screen or access it from a different device like a mobile and you will notice everything remains central. The trick is to set the left margin property of the widget to half it’s overall width.

TIP

You can check the widget id of any widget on your dashboard by simply hovering the mouse over the widget you want to know the if of. You will notice the id and co-ordinates of the widget appear in the bottom right hand corner of the dashboard builder screen.

For extra information, guidance and troubleshooting consult: