Custom Home Dashboard Display Styles

May 1, 2014 12:34 pm

In working with one client, they wanted a large number of pie charts on their dashboard. My first inclination was to embed a line of reports into another report and place it into the 100% width container. However, the client was not happy that the charts were at the bottom of the dashboard. After the addition of the [[dashboard]] include for the home page I was able to create a custom dashboard look/feel just for them by editing the CSS for the dashboard columns/panels.

Underneath the [[dashboard]] include I placed the following code:

<style>
div#dashboard-column-1, div#dashboard-column-2 { width: 100%; }
div#dashboard-column-1 > div { width: 18.5%; float:left; }
div#dashboard-column-1 .portlet-title { font-size: .8em; }
div#dashboard-column-2 >div { width: 48%; float:left; }
</style>

Once that code was in place, I simply had to stick all of the pie charts in column one of the dashboard tab and the new CSS makes a nice row along the top of the page. Any reports I place in column two will float left at 50% width, creating the look and feel of the original side by side dashboard columns and the final 100% column stays the same. Now when the client loads their blue dashboard they see the following setup:

May 1, 2014 12:43 pm

Also, If you are making use of different coloured dashboard (blue/silver/orange) on the homepage, you can also create a custom feel for each one. Every freedom admin page has a body class that references the colour you are currently viewing. These can be used to give each Home dashboard different CSS.

<style>
.colorBlue #dashboard-column-1 { blue specific CSS }
.colorSilver #dashboard-column-1 { silver specific CSS }
</style>