Is there any way to give individual blocks of "Big Numbers" components background colour?

Hi Guys,

I use big Numbers component to display some numeric and text data. I will be using 4-5 individual elements in each of the component. I would want to make it colourful by giving different colours to individual Items to make it more appealing.

Is it possible to do that in glide? If not what is the alternative?

Please find the screenshot attached with markings to show where I need background colour

Regards,
Dilip

If you have a Business Plan, it might be possible with CSS.

A simpler (and more dynamic) option would be to use a different component type - maybe a grid or card collection - and use something like dummyimage.com to generate images with the numbers in them.

3 Likes

Thank you for the reply Darren

I just need Numbers box background colours to be different.

Wouldnt the approach you mentioned mean that numbers have to be fixed or static ?

These numbers are dynamic in nature as they keep updating.

If it will work could you give me more details and help me out?

Regards,
Dilip

Use a template column to construct the image URL. This can include dynamic replacements for the foreground colour, background colour, and the text/number. And then use the images in whatever component fits your use case.

3 Likes

Thank you Darren for your reply.

My issues is the page already has multiple components and the components are pulling data from “Table A” which has multiple rows and in one of the column it has the value for each of the boxes.

how would


I be able to create rows with name Leads , Discussion, Confirmed inside this table?

and secondly do you mean to say I create a container and inside container I create a grid?

Attaching my database screenshot too for reference

The grid in my example was just to demonstrate.
There are so many different ways to do this. But if you want to use my suggestion and display the numbers in a collection, then you just need to organise the data into rows instead of columns. This could be as simple as creating a separate table with one row per data point, and then use single value columns to pull in the data, and use that table as the source of the collection.

Thank you for the explanation Darren. I will try this and get back to you.

Regards,
Dilip

Yes, I have done it before.

3 Likes

is this what you have done with business plan?

Regards,
Dilip

Yes, only on business/enterprise with CSS.

What is the class? StyledDiv2 seems not to be working

actually no need for class name

this worked

.dashboard .projects{
background-color: #efeffb;
}

just the custom class name you put for the big numbers componenet & the custom class name for the big number box

2 Likes

Yeah, I never use default class names when I need to target specific components like this case.

Hi Darren,

I could perfectly achieve what you have explained above. Its awesome.

But By using your above idea of using Demopage,

Can we play around with font size or font type of the text inside?

Regards,
Dilip