💅 Use CSS to Customize KPI Metrics in Canvas Dashboards (Center align, change color, and more)

Tips and Hacks
, , ,
1

Hello Holistics Community!

We’re excited to share with you a nifty trick to leverage the full potential of your Canvas Dashboard. With its powerful built-in features, you can customize your dashboard to fit your specific needs. Today, we’ll show you how to use CSS to customize your dashboard, giving your dashboard a cleaner and more professional look.

Steps to Customize Your Canvas Dashboard:

1. Create a Text Block with CSS Content

First, add a text block in your dashboard where you’ll write your CSS. Remember, each block has a unique name, which you can target using #uname in your CSS.
image

2. Hide Your Text Block

To ensure your custom CSS doesn’t display as a text block, you can either set the opacity of the block to 0 or move the text block outside the canvas area.

image
image1456×875 193 KB

Examples: Let’s center content in KPI Metric Block

Before

image

To center align all KPI widgets, simply add the following CSS to your text block:

<style>
.h-kpi-metric {
  text-align: center;
}
.h-kpi-metric-kpi {
  margin: 0 auto;
}
</style>

For those who want to center align a specific KPI block, replace v1 with the name of the block you wish to customize in the code snippet below, then add it to your text block:

<style>
#block-v1 .h-kpi-metric {
  text-align: center;
}
#block-v1 .h-kpi-metric-kpi {
  margin: 0 auto;
}
</style>

Result

image

Final Steps:
After adding the desired CSS to your text block, hide the text block by setting its opacity to 0 or by positioning it outside the canvas area. This way, your custom CSS takes effect without displaying the text block itself.

Wrapping Up:

With these simple steps, you can make your Canvas Dashboard not only more functional but also visually appealing. Don’t hesitate to experiment further with CSS to explore more customization options.

If you have any questions or need further assistance, feel free to drop them in the comments below. Happy Dashboard Customizing!

4 Likes