Knowledge Base Article

Turn a dashboard into a card view - Spaces between widgets

If you wish to turn this dashboard :

 

into this:

Please copy & paste this dashboard script:

 

dashboard.on('widgetready',function(d) {
   //Card view
   $('.dashboard-layout-column').css('background-color', '#F0F0F0');
   $('.dashboard-layout').css('background-color', '#F0F0F0');
   $('.dashboard-layout-cell-horizontal-divider').remove();
   $('.dashboard-layout-subcell-vertical').css('background-color', 'white').css('box-shadow', '4px 5px 12px #00000078')//.css('border-radius', '0px 0px 30px 30px').
   $('.dashboard-layout-subcell-host').css('padding', '10');
   $('.dashboard-layout').css('padding-right', '20px');
   $('.dashboard-layout').css('padding-left', '20px');
});
Updated 11-20-2023

5 Comments

  • There are few of our dashboards that don't look better with cards. Cards are like punctuation in text. They make you pause, like a comma subconsciously tells your brain to consider this information on its own, separate, but related to the whole. They focus the eyes, which focuses the brain.

  • Will's avatar
    Will
    Cloud Apps

    Hello o/

    Is there any recommended solution for customizing the dashboards using CSS files?

  • Looks amazing!!

    Just a question, if the above script is added in a custom plugin, it should then be applicable to all dashboards?

  • This looks great on our dashboards! Is there any way to make the formatting show up when exporting to PDF? This would make reports look so much better if so. 

     

    -Chris

  • Thanks Community_Admin ! How can I adjust individual cards. For example, what if I didn't want any space between the top 4 widgets so it looks like one white card?