Different Headers for Different Pages

jbpaul17 · Member · Mar 26, 2014 at 10:26 pm
Copy link

Add topic to favorites
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)
thesacredpath · Member · Mar 27, 2014 at 3:14 pm
Copy link
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
jbpaul17 · Member · Mar 27, 2014 at 7:13 pm
Copy link
@thesacredpath you rock, thanks so much! Now I’m off to upgrade to Custom Design.
thesacredpath · Member · Mar 27, 2014 at 9:04 pm
Copy link
Thank you and you are welcome, and if you have additional questions, or have problems, please let us know.
advocates4families · Member · Mar 28, 2014 at 12:04 am
Copy link
What would be the code if you want no site header on a subsequent page?
thesacredpath · Member · Mar 28, 2014 at 12:41 am
Copy link
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 · Member · Mar 28, 2014 at 6:07 pm
Copy link
And if that doesn’t work, does that mean the theme is over-riding the code?
Thank you!!
thesacredpath · Member · Mar 28, 2014 at 6:11 pm
Copy link
@advocates4families, neither of the sites associated with your username are using the Twenty Thirteen theme. Which site are you talking about?
thesacredpath · Member · Mar 28, 2014 at 6:13 pm
Copy link
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?
advocates4families · Member · Mar 28, 2014 at 6:45 pm
Copy link
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…
designsimply · Member · Apr 1, 2014 at 6:15 pm
Copy link
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;
}
```

No items found.