Add these codes to the Custom CSS box and click Save
Desktop Only
/* Desktop Only */ @media screen and (min-width:768px) { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }}}
Mobile Only
/* Mobile Only */ @media screen and (max-width:767px) { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Blog Page (list)
/* Blog Page (list) */ [class*="type-blog"].view-list { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Blog Post
/* Blog Post */ [class*="type-blog"].view-item { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Event List
/* Event List */ [class*="type-event"].view-list { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Event Detail
/* Event Detail */ [class*="type-events"].view-item { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Shop/Category
/* Shop/Category */ [class*="type-products"].view-list { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Individual Product
/* Individual Product */ [class*="type-products"].view-item { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Cart Page
/* Cart Page */ body#cart { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Homepage Only
/* Homepage Only */ body.homepage { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
Other pages (exclude homepage)
/* Other pages - exclude homepage */ body:not(.homepage) { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
On Scroll Only
/* On Scroll Only */ header#header.shrink ~ footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }}
When the burger menu is open
/* When burger menu is open */ body.header--menu-open { footer.sections { &{ background-color: #f1f; } .section-background, .section-border { background-color: transparent !important; }} }
One Page
Add this code to Page Header Code Injection and click Save
If you use a Personal Plan (doesn’t support Code Injection), you can add code to Code Block.
<!-- Footer background color - One Page --> <style> footer.sections { background-color: #f1f; } footer.sections .section-background, footer.sections .section-border { background-color: transparent !important; } </style>