Metro: big and bold header above container

Community Forums Forums Design Tips and Tricks Metro: big and bold header above container

This topic is: resolved

This topic contains 6 replies, has 3 voices, and was last updated by  larsvanzanten 1 year, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #26173

    larsvanzanten
    Participant
    Post count: 8

    Hi!

    I’m using the Metro theme for my band’s new website. I think it’s absolutely gorgeous!

    Just one thing: I want to create a big and bold header, but only on the homepage. I want to make a header (with transparancy, so the beautiful background is still visible) and some text before the container starts. Kind of like this theme from Indiefest. But like I said: only on the homepage! Any ideas on how to do that?

    It would be even better if I could include a “slide down” option or something so that when users would click it the browsers slides down to the “regular” homepage.

    Have you guys got any ideas on how to do this?

    Thanks,
    Lars

    #26177

    wp guy
    Participant
    Post count: 220

    Well, I can solve one of your problems – increasing the header size. Just adjust:
    #header {
    min-height: 87px;
    overflow: hidden;
    }

    Check into this solution for only having your this header show up on the main page: http://www.jonbellah.com/2012/12/genesis-custom-header-for-multiple-page-layouts-and-templates/

    http://efficientwp.com/tutorials/using-different-header-images-on-different-pages

    #26185

    anitac
    Participant
    Post count: 7032

    For the header – home page only area – you could add in a Welcome Widget just for home page using Brian Gardner’s instructions – http://www.briangardner.com/welcome-text-widget/ but you would need to add this to the code for “home page only.”

    [php]if ( is_home() )[/php]

    You could create a nice transparent image with the text you want and add it to that widget area.

    Then to jump down the page as you want – you can add in a Page Jump using the instructions found here:

    http://en.support.wordpress.com/splitting-content/page-jumps/#jump


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #30379

    larsvanzanten
    Participant
    Post count: 8

    Thanks for your comments! The welcome-text did the trick. Right now I’m linking in to an anchor-link which I put in the genesis_header Hook using the Simple Hooks plugin. I tried a few things to add a nice scroll effect but it didn’t work out yet…

    #30380

    larsvanzanten
    Participant
    Post count: 8

    BTW: the site is live now: http://www.fmusic.nl. Happy to see your comments on it!

    #30431

    anitac
    Participant
    Post count: 7032

    That looks great! Fantastic job!


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #30938

    larsvanzanten
    Participant
    Post count: 8

    Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.