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

Community_Admin

Admin

Joined October 06, 2021

View Profile

5 Comments

KristyGraves
Cloud Apps
10-20-2021
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
Cloud Apps
12-14-2021
Hello o/

Is there any recommended solution for customizing the dashboards using CSS files?
MikeGre
ETL
12-27-2021
Looks amazing!!

Just a question, if the above script is added in a custom plugin, it should then be applicable to all dashboards?
Chris_AECC
Data Storage
02-11-2022
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
gwolfe
ETL
04-18-2022
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?