Genesis Framework – Custom Header for DIfferent Pages

Community Forums Forums Design Tips and Tricks Genesis Framework – Custom Header for DIfferent Pages

This topic is: not resolved

This topic contains 23 replies, has 3 voices, and was last updated by  lflier 1 year, 1 month ago.

Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #57332

    kimribbans
    Participant
    Post count: 21

    Yes that’s what I thought, so I reverted back to the clean original theme with no CSS edits – just added that code from you – and still no luck…

    K

    #57445

    braddalton
    Participant
    Post count: 10574

    Try this, it may help as there;s different coding


    #57461

    kimribbans
    Participant
    Post count: 21

    Thanks

    I tried that and now I’m getting the small header on top of the big header (logo.png) on all type of pages home and sub.

    Here’s a screen shot of the home page

    https://www.dropbox.com/s/sosriij5x70rjnb/home-page-header.jpg

    And here are the sub pages

    https://www.dropbox.com/s/w51yko0n023bi2p/sub-page-header.jpg

    Here’s the home page on the Raw Genesis theme – no child

    https://www.dropbox.com/s/459nto7ac4hmg31/home-page-header-clean-site.jpg

    And here’s the sub page on the same raw theme

    https://www.dropbox.com/s/hqmongrzzqv19d5/sub-page-header-clean-site.jpg

    PLUS. Today I broke the whole site when I activated Jetpack and had to do a full clean re-install, and rebuild all the pages, so the site is clean.

    I know what is one of the problems. I have a widget in the header. When I take it out I can at least get the big header to show up… its live right now (http://dawnclark.net/mirror/). But when I put it back I get the results above.

    p.s.

    Here’s the code I inserted above all the other CSS styling – to make sure I got it right

    /* ========== CUSTOM HEADERS FOR DIFFERENT PAGES ==========*/

    .home .site-header {
    background: url(“images/big-logo.png”) no-repeat scroll 0 0 transparent;
    height: 260px;
    width: 1080px;
    overflow: auto;
    margin: auto;
    }

    .site-header {
    background: url(“images/small-logo.png”) no-repeat scroll 0 0 transparent;
    height: 100px;
    width: 1080px;
    overflow: auto;
    margin: auto;
    }

    I think I’m going to have to give up…

    • This reply was modified 1 year, 3 months ago by  kimribbans.
    • This reply was modified 1 year, 3 months ago by  kimribbans.
    #57462

    kimribbans
    Participant
    Post count: 21

    What I am actually getting is just the small header image – small-logo.png

    The other image that is showing up underneath it is the default logo image (logo.png)

    So… I edited the CSS this section and added display: none;

    .header-image .site-header .wrap {
    background: url(images/logo.png) no-repeat left;
    display: none;
    padding: 0;
    }

    The logo.png isn’t showing up anymore. But the heights are still the same

    K

    • This reply was modified 1 year, 3 months ago by  kimribbans.
    • This reply was modified 1 year, 3 months ago by  kimribbans.
    • This reply was modified 1 year, 3 months ago by  kimribbans.
    • This reply was modified 1 year, 3 months ago by  kimribbans.
    #57466

    kimribbans
    Participant
    Post count: 21

    So I found a CSS section for header height and commented it out. SUCCESS….!!!!

    However… it IS NOW working with the different size headers BUT I now can’t put any widgets in the header.

    I’ll have to see which my client wants… different size headers or a widget in the header… I should contact the Genesis folks and let them know

    Thanks for all your time on this – I really appreciate it

    K

    • This reply was modified 1 year, 3 months ago by  kimribbans.
    • This reply was modified 1 year, 3 months ago by  kimribbans.
    #57469

    kimribbans
    Participant
    Post count: 21

    I submitted a ticket to StudioPress’ support

    K

    #57470

    braddalton
    Participant
    Post count: 10574

    The CSS code should really go at the end of the file.

    I tested the header right widget and it worked fine for me.


    #64806

    lflier
    Participant
    Post count: 11

    This was a helpful discussion. I used Brad’s CSS method for changing the background of the header on the home pages but it took me a while to understand that the order in which the statements appear in the CSS file is important.

    Brad’s method, which also appears here (http://wpsites.net/web-design/using-different-headers-on-different-pages-of-the-genesis-2-0-sample-theme/#comment-47723) is as follows:

    .site-header {
    background: #004A7F;
    height: 164px;
    overflow: auto;
    margin: auto;
    }

    .home .site-header {
    background: #FF6A00;
    height: 262px;
    overflow: auto;
    margin: auto;
    }

    I initially made the mistake of writing the properties for the “.home .site-header” class above the properties for the “.site-header” class in my CSS file. This of course caused the CSS I wrote for the home page to be immediately overwritten by the CSS I had intended the other pages because the “.site-header” class appears in both sorts of pages. The right way to do it is the way it is shown above, with the properties for the “.home .site header” class appearing below the properties for the “.site-header” class in the CSS file. As long as no other conflicting “.site header” properties appear below it, you’re good to go.

    I had thought that the “.home” class wasn’t picking out the home page. It was, but the properties for the site header had been overwritten. Duh! But that’s how you learn I guess.

    Thanks for the help, Brad!

    #64807

    lflier
    Participant
    Post count: 11

    Oh, yeah. And one more thing…

    I included a background image in the “.site-header” class but not in the “.home .site-header” class. But having already put the background image in the former, it’s not enough to not specify an image in the latter; you have to cancel out the property in the latter by specifying “background-image: none;”

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.