Community Forums › Forums › Archived Forums › General Discussion › Corporate theme different header images
Tagged: header, header image, search field
- This topic has 16 replies, 4 voices, and was last updated 11 years, 4 months ago by
JennyLon.
-
AuthorPosts
-
May 2, 2013 at 7:52 am #38913
davidsteele
MemberHi,
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.
TIAMay 3, 2013 at 8:27 am #39084Jamie Lynch
ParticipantHello, I have the same question. Did you ever find an answer? I'd appreciate any advice you can give me!
May 7, 2013 at 12:00 pm #39738davidsteele
MemberSo far, none yet. I was hoping to get some help here...
May 7, 2013 at 12:56 pm #39752Jamie Lynch
ParticipantDavid...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;
}
May 7, 2013 at 2:33 pm #39764essaysnark
ParticipantThanks - this was really helpful, had been thinking about doing something similar on the eleven40 theme and your instructions got me there.
May 9, 2013 at 11:58 am #40118davidsteele
MemberJamie, 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...
May 9, 2013 at 12:05 pm #40122essaysnark
ParticipantAre 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.
May 9, 2013 at 12:18 pm #40124davidsteele
Membersure essay... here's the link: http://markhamgateway.com/PrimeNutrisource/ the header image cuts off at the middle
May 9, 2013 at 12:42 pm #40135essaysnark
ParticipantI'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.
May 9, 2013 at 4:21 pm #40180Jamie Lynch
ParticipantYou 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.
May 9, 2013 at 4:23 pm #40182essaysnark
ParticipantJamie, 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).
May 9, 2013 at 4:51 pm #40187davidsteele
MemberThanks 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?
May 9, 2013 at 5:13 pm #40191Jamie Lynch
ParticipantYes, 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.
May 10, 2013 at 1:33 pm #40365davidsteele
MemberAwesome! 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.
May 14, 2013 at 5:25 am #40834Jamie Lynch
ParticipantHi 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.
May 14, 2013 at 12:47 pm #40896Jamie Lynch
ParticipantDavid,
I see you took my advice to use the function built into the Corporate theme. It looks good.
September 30, 2013 at 8:09 pm #64887JennyLon
MemberI 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 -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.