Archived topic
Apply list ul styles to my footer element block list
3 replies · Started by Adrien on March 3, 2021
Viewing posts 1–4 of 4
Dear GP Team,
I have styled my UL bullet point list with this CSS code below to show small orange cubes :
You can see it in action here : https://ecomturbo.net/meilleur-theme-woocommerce/
However, I would also like this style to apply to my Footer Element block but I can't figure out how.
I would appreciate if you could help me.
/* BULLET LIST STYLE */
.entry-content ul:not(.blocks-gallery-grid) {
margin: 0;
padding: 10px 0 30px 0;
}
.entry-content ul:not(.blocks-gallery-grid) > li:before {
background-color: #f56f46;
border-radius: 2px;
content: '';
height: 9px;
position: absolute;
top: 15px;
left: 0;
width: 9px;
}
.entry-content ul:not(.blocks-gallery-grid) > li {
line-height: 1.85;
list-style-type: none;
padding-left: 21px;
position: relative;
}
@media (min-width: 769px) {
.entry-content ul:not(.blocks-gallery-grid) > li {
margin-bottom: 10px;
}
}Thanks a lot. Adrien
Hi there,
edit your Block Element and in the parent Container block give it a CSS Class in Advanced > Additional CSS Class(es) eg. gb-footer
You can then include a CSS rule in your CSS selectors like so:
.entry-content ul:not(.blocks-gallery-grid),
.gb-footer ul {
margin: 0;
padding: 10px 0 30px 0;
}
.entry-content ul:not(.blocks-gallery-grid) > li:before,
.gb-footer ul li:before {
background-color: #f56f46;
border-radius: 2px;
content: '';
height: 9px;
position: absolute;
top: 15px;
left: 0;
width: 9px;
}
.entry-content ul:not(.blocks-gallery-grid) > li,
.gb-footer ul li {
line-height: 1.85;
list-style-type: none;
padding-left: 21px;
position: relative;
}
@media (min-width: 769px) {
.entry-content ul:not(.blocks-gallery-grid) > li,
.gb-footer ul li {
margin-bottom: 10px;
}
}You're a CSS Jedi David! Thanks a lot.
Glad to be of help :)
This archived topic is closed to new replies.
