Customising Labels
Customise the colours, borders, shape, size, and spacing of the Label Display Type filters.
Selectors
Main Selector: .fww-widget-content .label
Descendants:
- .fwwattributelink – Label
- .categorycount – Product count
Full Background
.fww-widget-content .label {
background-color: lightgreen;
}
Label Background & Text Color
.fww-widget-content .label .fwwattributelink {
background-color: lightblue;
color: white;
}
Label Product Count
Changing background colour, text colour, and font sizes of the product count.
.fww-widget-content .label .categorycount {
background-color: lightcoral;
color: black;
font-size: 30px
}
Label Borders
These selectors are the same as the “Label Background & Text Colour” selectors, so the properties and values can be added to the same rule.
Use these to customise the shape and the spacing of the labels.
.fww-widget-content .label .fwwattributelink {
border-radius: 8px;
border: 6px solid green;
margin-top: 6px
}
Full Example
All CSS used above
.fww-widget-content .label {
background-color: lightgreen;
}
.fww-widget-content .label .fwwattributelink {
background-color: lightblue;
color: white;
}
.fww-widget-content .label .categorycount {
background-color: lightcoral;
color: black;
font-size: 30px
}
.fww-widget-content .label .fwwattributelink {
border-radius: 8px;
border: 6px solid green;
margin-top: 6px
}
