Customising Container Buttons

Dave Hilditch

November 11, 2023

0 Views 0

SaveSavedRemoved 0

Customise each of the Container Buttons separately, starting with the selectors: .fwwcontainer.containername

Selectors

Main:

• .fwwcontainer.popout – Popout Button
• .fwwcontainer.popover – Popover Button
• .fwwcontainer.popoutgroup – Popout Group
• .fwwcontainer.popovergroup – Popover Group

Descendants: 

• .btn – Overall button
• .dashicons – Icon
• .fwwpopoutbuttontitle – Title
• .selectedcount – Selected amount
• .fwwicon-arrow_drop_down – Arrow

Quick Example

Main class + descendant:

.fwwcontainer.popout .btn {
background-color: lightgreen;
color:white;
}

Full Example – Including background/text colors, font/arrow sizes, and border ratios

Overall button:

.fwwcontainer.popout .btn {
background-color: lightgreen;
color:white;
}

Icon: 

.fwwcontainer.popout .dashicons {
background-color: pink;
color: blue
}

Title:

.fwwcontainer.popout .fwwpopoutbuttontitle {
color: orange;
font-size: 30px
}

Selected Amount:

.fwwcontainer.popout .selectedcount {
background-color: red;
color: black;
}

Arrow:

.fwwcontainer.popout .fwwicon-arrow_drop_down {
color: white;
font-size: 50px
}

Full CSS used for example

.fwwcontainer.popout .btn {
background-color: lightgreen;
color:white;
border-radius: 10px;
margin: 10
}
.fwwcontainer.popout .dashicons {
background-color: pink;
color: blue
}
.fwwcontainer.popout .fwwpopoutbuttontitle {
color: orange;
font-size: 30px
}
.fwwcontainer.popout .selectedcount {
background-color: red;
color: black;
}
.fwwcontainer.popout .fwwicon-arrow_drop_down {
color: white;
font-size: 50px
}