Customising Lists

Dave Hilditch

November 11, 2023

0 Views 0

SaveSavedRemoved 0

Customise colours, font sizes, and text indentation of the List Display Type filter.

Selectors

Main Selector: .fww-widget-content .list

Descendant Selectors: 

• .fwwattributelink
• .fwwname
• .children

Full Background

.fww-widget-content .list {
background-color: red;
}

Link Background & Text Color

.fww-widget-content .list .fwwattributelink {
background-color: red;
color: white
}

Product Count

Colour and font size

.fww-widget-content .list li .count {
color: blue;
font-size: 20px
}

Font Size

.fww-widget-content .list .fwwname {
font-size: 20px
}

Text Indentation

Push the child categories further right or left

Indent Right

.fww-widget-content .list .children li {
text-indent: 10px;
}

Customise the next child in line by copying the above rule and adding another “li” behind the previous “li”, and so on.

.fww-widget-content .list .children li li {
text-indent: 30px;
}

Full Example

All CSS used above

.fww-widget-content .list .fwwattributelink {
background-color: red;
color: white
}

.fww-widget-content .list li .count {
color: blue;
font-size: 20px
}

.fww-widget-content .list .fwwname {
font-size: 20px
}

.fww-widget-content .list .children li {
text-indent: 10px;
}

.fww-widget-content .list .children li li {
text-indent: 30px;
}