Jump to content
Sign in to follow this  
rtysmith

Change header based on page

Recommended Posts

rtysmith

Is it possible to change the header background image based on the page? I want one section of my site to have a different header, and when you on any of the child/grandchild pages of that page

Share this post


Link to post
Share on other sites
rtysmith

OK, great - got that working for the logo. I deleted the logo from the pagelines settings, but now it puts in the site name/description - how do I prevent that from showing? Also - how do I change the background image of the header (not just the logo?)

Share this post


Link to post
Share on other sites
Kate

Hi Tyler, You can change the background image (based on the page ID class of the body tag of each page) in the CSS. The site name/description is in header.php.

Share this post


Link to post
Share on other sites
rtysmith

Can you give me a bit more of an example on changing the header?

Share this post


Link to post
Share on other sites
Kate

The background image, you mean? Sure... (and this is just off the top of my head):

.page-id-3 #header{background:url('url-for-your-image-here') no-repeat;}

Share this post


Link to post
Share on other sites
rtysmith

would that just go into custom code?

Share this post


Link to post
Share on other sites
rtysmith

OK, got the background, not seeing the settings in header.php to control the logo/site text, any idea where it is?

Share this post


Link to post
Share on other sites
rtysmith

Finally found it in library.templates Thanks!

Share this post


Link to post
Share on other sites
rtysmith

Any way to change the header background image via hook vs. css?

Share this post


Link to post
Share on other sites
cmunns

Yes...apply a background to the #branding .content {} selector

Share this post


Link to post
Share on other sites
rtysmith

Thanks, could you layout a bit more of a sample code?

Share this post


Link to post
Share on other sites
catrina

Here's a more specific sample:

#branding .content {background-image: url('http://BACKGROUNDIMAGEURLHERE')}

Make sure your background image is uploaded to the Media Library first and then you can grab the full background image URL from there.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×