Change header and footer colors on each page
Is there a way to change the header and footer colors for each page individually?
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.
Is there a way to change the header and footer colors for each page individually?
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Have a different question or issue?
Start New Thread
Replies
3Hi André
Thanks for reaching out.
Unfortunately not from within theme options. You could however use Appearance > Custom CSS for this. For example, on the home page you might insert into Custom CSS:
/* Home */ .home header#masthead { background: #fcfcfc; } .home #colophon { background: #2f3033; }Take a quick look at our Custom CSS tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/. In there Greg covers using your browsers developer tool. On each page in the source code you’ll find a body tag. Each page has a unique class, for example the home class I used above. In this way you could adjust colors on a page by page basis.
Hi André Bowen
You can fix/change this with some custom CSS but you will need some information from the page first.
Navigate to the page you want to change the colours on and press f12 to open the developer console of your browser.
Look for the body tag in the page code. In there you should find an entry for the page ID.
Then if you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
.page-id-2 #masthead, .page-id-2 #colophon { background: #000; }You can change the colour code to any colour hex value
http://www.w3schools.com/tags/ref_colorpicker.asp
If you want them to be different colours then you would use this instead
.page-id-2 #masthead { background: #000; } .page-id-2 #colophon { background: #CCC; }Let us know how you get on
Magus
I’ll give this a try thanks a ton for your help!
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.