Different Headers for Different Pages
-
I’d like to be able to show a different header image for different pages on my site and am considering the Custom Design upgrade to get access to the Custom CSS feature. My question is, can I utilize CSS code to show a different header image for different pages?
My specific example would be with the http://oscwcaa.wordpress.com site and having a different header image for the Church and Preschool sections of the site. Any assistance you may be able to provide would be greatly appreciated… thanks!
The blog I need help with is: (visible only to logged in users)
-
Yes, this can be done by targeting individual pages with their unique page body class.
What you would do is upload the images to your media library, get the URL of those images and replace URL_OF_IMAGE between the quote marks with the URL of your new image for each page you wish to have a unique header on. Any page that did not have a unique header declared in the CSS would use the one set at Appearance > Header.
.page-id-2 .site-header { background: url("URL_OF_IMAGE") no-repeat scroll center top / 1600px auto rgba(0, 0, 0, 0); }To find the page IDs, view the source when looking at the page and look in the opening body tag and you will see something like this:
page-id-2 -
-
Thank you and you are welcome, and if you have additional questions, or have problems, please let us know.
-
-
To hide the header on a certain page, again you do this by using the page id, something like this.
.page-id-7 .site-header { display: none; } -
-
@advocates4families, neither of the sites associated with your username are using the Twenty Thirteen theme. Which site are you talking about?
-
Also, did you view the source code for the page you wished to remove the header on and get the unique page ID body class (which may be structured differently from Twenty Thirteen) for the page?
-
Sorry! I did not see specific reference to twenty thirteen – I am using twenty eleven. I went through all the code but couldn’t find what it should be instead. I tried site-title and site-title a even though I’m pretty sure that refers to the site title text…
-
I checked http://advocatesforfamiliesfirst.wordpress.com/ because I think that’s the blog you are working on.
I found that you added the following custom CSS:
.page-id-25 .site-header { background: no-repeat scroll center top / 1600px auto rgba(0, 0, 0, 0); display:none }Just to note, you can shorten that because display:none makes the other rule irrelevant:
.page-id-25 .site-header { display:none }But it’s still not quite right. I see that the “Advocacy” page is the one with a body class of “page-id-25”, is that the page you’re trying to modify?
http://advocatesforfamiliesfirst.wordpress.com/advocacy/To hide the header image only on the “Advocacy” page on the http://advocatesforfamiliesfirst.wordpress.com/ site using the Twenty Eleven theme, add this to your Appearance > Customize > CSS editor:
.page-id-25 #branding > a { display: none; }
- The topic ‘Different Headers for Different Pages’ is closed to new replies.