How to create headings in a dashboard

1 post / 0 new
Terje
Terje's picture
How to create headings in a dashboard

Hi developers.

I often find it usefull to create my own headings in a dasboard. In this post I will explain what I have found to be the best way to do this.

1)
First off you should create a couple of CSS classes to define the look of the heading.
- Right-click on any dashboard element and choose "Edit dashboard properties".
- Go to the "Advanced" tab.

2)
- In the top most textarea labeled "Styling Rules (CSS)" enter the following:

.h1 .elementContainerContent div {
   background-color: #f39c12; /*Bakgrunnsfarge*/
   text-align:center; /*Plassering av teksten*/
   color: #fff; /*Tekstfargen*/
   font-weight:bolder; /*Tekstformatering*/
   font-size: 2em !important; /*Tekststørrelse*/
   padding-top:5px; /*Intern marg i toppen*/
   padding-bottom:5px; /*Intern marg i bunnen*/
   font-family: arial; /* skrifttype */
}

/* The following line hides some elements not needed in order so save some space */
.h1 .elementContainerNavigationStrip, .h1 .paramsSelected { display:none; }
 
- Close the dialog by clicking "Save"
 
3)
- Add a textelement to your dashboard.
- Right-click the textelement and select "Edit element container"
- Go to the "Advanced" tab
- In the textarea labled "CSS Class" enter h1
- Save the changes
- Right-click the textelement and edit it and write in your title.
 
 
You should now have a title you can place where ever you want.
Feel free to experiment with the CSS in order to create more creative headings.
 
Have fun! CSS is awesome :)