Page background colour
-
https://twodesign.co.uk/about/
I’m trying to set a background colour for this page so that it is a different colour to the rest of the site,
I’ve set the page background, with the ‘Set Background Colour’ function, to pink #ffd5d6.
The site wide background colour is set to grey #f2f2f2.
The problem is with the footer (and header when scrolling) which is grey #f2f2f2. And I want it to display pink #ffd5d6 – the same as the page background colour, but only for that single page.
We did have a custom CSS which did work in making the footer transparent:
#footer-region {
background: none !important;
}But that no longer works.
Can you suggest a solution?
-
Richard Global Moderatorwrote on Aug 12, 2020, 3:03 PM last edited by Richard Aug 12, 2020, 11:04 AM
Dear @nickraven
Beautiful webSite :)
Is this what you are after?
Try setting the footer's "background-color" to " :#ffd5d6; "
Be sure to disable the "transparent" first as this may override your code :)
Hope this helps
Best
Richard -
Thanks Richard, and apologies for the late response. I have been away!
That would work for that particular page, but we have other pages using the same footer with different colour backgrounds. For example this one is green: https://twodesign.co.uk/contact/
Is there a way to make the footer take the colour of the particular page?
-
Dear @nickraven
Hey Im sorry for the late reply too!
I just wanted to follow up and let you know that i'm taking a look into this & will get back to you early in the week! :)Until then let me know if you have any further question or how i can help,
Best Wishes
Talk soonRichard
-
@nickraven Each page has a slug specific to it, so you can target an element and have it only affect that page.
So for a green contact footer, find the slug (see above) and then you'd add:
.slug-contact #footer { background-color: #dcffdc; }
about page:
.slug-about #footer { background-color: #ffd5d6; }
etc etc!
-
Dear @nickraven
Thank you :)
@joshsender Please feel free to ask any further questions,
Good luck on your Lay Theme Journey
Sincerely
Richard -
Perfect!
Thanks @joshsender
Thanks @Richard-Keith -
Wrong way round! :0
Thank you @joshsender
Nick, website looks great!, good luck on the rest of your journeyKind Regards
Richard
Need custom programming for your Lay Theme site?
I regularly add new features to Lay Theme for free, based on user feedback. But if you or your client need something more specific, I’m happy to offer custom paid programming tailored to your project.
Email info@laytheme.com with the subject "Custom paid programming for Lay Theme" and a short description of what you need — I’ll reply with a cost estimate.
Custom features I build often make it into future Lay Theme updates, so your idea might benefit the whole community.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it