Corporate theme different header images

[davidsteele]

Hi,

Need help on how to use different header images for corporate child theme please. Basically the home page will use a different header image while the sub-pages will have a different header image. Any help or input will be greatly appreciated.
TIA

[Jamie Lynch]

Hello, I have the same question. Did you ever find an answer? I'd appreciate any advice you can give me!

[davidsteele]

So far, none yet. I was hoping to get some help here...

[Jamie Lynch]

David...I found the solution. By modifying the CSS  you can have one image for the homepage header and a different image in the header on other pages. In fact, every page can have a different image.

For the HomePage modify the .CSS by adding the following...
.home #header #title-area {

background: url(images/header.png) no-repeat transparent;

}

For pages, find the page ID number and then insert it where you see "xx" below and also make sure the URL is the correct path to the image....

.page-id-xx  #header {

background-image: url("http://yourwebsite.com/wp-content/uploads/2013/05/header-secondary-pages.png");

background-repeat: no-repeat;

}

 

[essaysnark]

Thanks - this was really helpful, had been thinking about doing something similar on the eleven40 theme and your instructions got me there.

[davidsteele]

Jamie, thank you very much for finding a solution! It's working! but not fully, when I copied and pasted your code... the code for the homepage... it displays the image header that I selected but its cut off at the middle... I'm really not an expert in CSS and I'm not sure what attributes I need to add to make it work.

For the pages, I can't seem to get it to work...

[essaysnark]

Are you saying that you have a background image that's repeating, and you can see the seam? If so, we had to put    <code>padding:0px;</code> in the #header style to fix that.

If that's not what you mean, then please give us a link to your site so we can see what's happening.

[davidsteele]

sure essay... here's the link: http://markhamgateway.com/PrimeNutrisource/ the header image cuts off at the middle

[essaysnark]

I'm definitely no CSS expert but what I'd try first is this:

Move the line
`background: #000 url(images/header.png) no-repeat top left;`

from the #header style to the #wrap style above it.

[Jamie Lynch]

You enabled a widget in the header and placed a Search feature in that widget. You need to remove this if you don't want it to cover your header image.

Also, you should add an attribute of width to the CSS.  Therefore, your CSS would be modified and look like this:

.home #header #title-area {

background: url(images/header.png) no-repeat transparent;
width: 960px;

}

If you're still having trouble with adding a different image to your other pages, let me know and I'll explain further.

[essaysnark]

Jamie, I'm certain you know CSS way better than I do, but just wanted to mention that we have a widget in our right header with a menu, and we don't have the issue that he's seeing (different theme but same widget area).

[davidsteele]

Thanks for the help everyone! That did it Jamie thanks! But is there a way of showing the full header image without removing the search feature in that header area?

[Jamie Lynch]

Yes, it your case  you can do it with CSS and it will work well because the top right side of your header is solid black. You'd have to add styling to the widget:  size, background color, height, position.

Go ahead and re-activate the header widget with the search feature. I'll look at it using Firebug and then write back and tell you how to modify the CSS.

[davidsteele]

Awesome! Thanks a lot Jamie! Reactivated the search widget in the header... took out the width attribute for now, the search widget goes directly under the header image if you put it in.

[Jamie Lynch]

Hi David. Sorry I was away for a few days. I will take a look at your search field now. Before I do though, I thought the Corporate child theme allows you to simply add the search field to the far right of your navigation bar. This is the logical place for the navigation bar.

All you would have to do is in your Dashboard, go to Genesis > Theme Settings > Scroll down to Navigation > Primary Navigation and Select: "Enable Extras on Right Side.

[Jamie Lynch]

David,

I see you took my advice to use the function built into the Corporate theme. It looks good.

[JennyLon]

I too want to have a different Header Page image one for home page and various others MAY at times be different for CERTAIN other pages etc.

I am a complete newbie to all this hence please bare with me and doing all this code (I normally run a mile!)-:
Could you/someone kindly let me know specifically what the code is to use then to accomplish this...and where specifically I paste it in is it my style sheet or php ?
NOTE***We use Lifestyle theme version 1.0 i t has already some code on the actual style sheet and that image header right now is on EVERY page (I presume I need to delete this code ? and ONCE a new one given to me correct?- hopefully on reading this post.

SECOND QUESTION
So let's presume the style sheet say has the right code etc someone here gives me , When I create say a NEW page or ones I already have My other question is ....What do I need each time to ACTUALLY do, in order to get it to display whatever header image I actually want ?

For example i.e. I may want the same home page one or indeed others on certain other pages or simply some pages may have its own unique one?
Hence what do you do each time to have this happen?

many thanks!
Jenny

[Author]

Posts