Turn a dashboard into a card view - Spaces between widgets | Widget & Dashboard Scripts

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');
});

Community_Admin

Posted 4 years ago·Last reply 4 years ago

5 comments

Garrett Wolfe

·4 years ago

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?

Chris_AECC

·4 years ago

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

Michalis Gregoriou

·4 years ago

Looks amazing!!

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

Will

·4 years ago

Hello o/

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

KristyGraves

·4 years ago

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.