Change font-weight to normal in a grouped grid view

API & Customization Ask Developers
1

Hi,

Does anyone know how to set font-weight to normal in a grouped grid view?

image
image686×792 19.5 KB

I have tried with the following:
.kn-table-group.kn-group-level-1 {
background-color: #195E93 !important;
color: #FFFFFF;
font-weight: normal !important;
}

.kn-table-group.kn-group-level-2 {
background-color: #258FC9 !important;
color: #000000;
font-weight: normal !important;
}

But it doesn’t change and I can’t figure out why.

2

Hi @Alteco

Try

font-weight: 300;

Change 300 to 400 or 200 till you get the right font-weight.

Craig

3

Thanks for your answer Craig.
Unfortunately it doesn’t change anything, it is still the same. I have tried 100, 200, 300 and 400.

.kn-table-group.kn-group-level-1 {
background-color: #195E93 !important;
color: #FFFFFF;
font-weight: 400 !important;
}

.kn-table-group.kn-group-level-2 {
background-color: #258FC9 !important;
color: #000000;
font-weight: 400 !important;
}

4

Hi @Alteco

The issue you are having here is specificity and targeting your elements.

.kn-content .kn-group-level-1  td{
background-color: #195E93;
color: #FFFFFF;
font-weight: normal;
}
.kn-content .kn-group-level-2 td{
background-color: #258FC9;
color: #000000;
font-weight: normal;
}

image

Try the above css. I have removed the !important as this should be used sparingly. I have also made the target more specific by adding .kn-content and I have add the td so you are targeting the element that has the text, also making it more specific.

image

image

In the above images you can see that specificity on first image has that extra 1 making it more specific.

Craig

1 Like
5

Ahh I see. Thanks for the explanation and your expertise Craig, once again :slightly_smiling_face:
It all makes sense now and it works perfectly!