Corporate theme different header images

Community Forums Forums General Discussion Corporate theme different header images

This topic is: not resolved

This topic contains 16 replies, has 4 voices, and was last updated by  JennyLon 11 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #38913

    davidsteele
    Participant
    Post count: 20

    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

    #39084

    Jamie Lynch
    Participant
    Post count: 11

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

    #39738

    davidsteele
    Participant
    Post count: 20

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

    #39752

    Jamie Lynch
    Participant
    Post count: 11

    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;

    }

     

    #39764

    essaysnark
    Participant
    Post count: 342

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

    #40118

    davidsteele
    Participant
    Post count: 20

    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…

    #40122

    essaysnark
    Participant
    Post count: 342

    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.

    #40124

    davidsteele
    Participant
    Post count: 20

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

    #40135

    essaysnark
    Participant
    Post count: 342

    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.

    #40180

    Jamie Lynch
    Participant
    Post count: 11

    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.

    #40182

    essaysnark
    Participant
    Post count: 342

    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).

    #40187

    davidsteele
    Participant
    Post count: 20

    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?

    #40191

    Jamie Lynch
    Participant
    Post count: 11

    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.

    #40365

    davidsteele
    Participant
    Post count: 20

    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.

    #40834

    Jamie Lynch
    Participant
    Post count: 11

    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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.