Metro: image header link to homepage

Community Forums Forums Design Tips and Tricks Metro: image header link to homepage

This topic is: resolved

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #30381

    larsvanzanten
    Participant
    Post count: 8

    Hi guys!

    Have you got any idea on how to make a custom image header (using the built-in WP feature) clickable with a link to the homepage? My site is http://www.fmusic.nl. Did spend some time on it already, but I couldn’t make it work…

    #30448

    weslinda
    Participant
    Post count: 193

    Can you share what steps you’ve taken.  It looks like you’re using the metro theme and this is pretty straight forward.  You would go to Appearance > Header upload the image you want there and it’ll automatically be linked to your home page.

    However,after taking a quick peek, it does appear that someone has modified your homepage to have a sort of “landing” image and the modifications to put that in place have changed how the header image feature works.  Would probably need to see how that’s being managed to explain why the link isn’t coming over properly.


    Loving the Genesis Life!

    #30563

    AngelaEloise
    Participant
    Post count: 9

    I’m having the same problem. I uploaded my header image using the Appearance > Header upload, but it did not create an automatic link for me either. Where would be the best place to manually place the hyperlink into the header code?

    #30666

    weslinda
    Participant
    Post count: 193

    Angela, do you have a link? Was any customization done on your site?  When I do a fresh install of the theme this works flawlessly.  Perhaps if you have a link I can see if something might be interfering with it.


    Loving the Genesis Life!

    #30935

    larsvanzanten
    Participant
    Post count: 8

    Well, I added the “landing page” like function using these instructions: http://www.briangardner.com/welcome-text-widget/. I added the anchor link using the Genesis Simple Hooks plugin. I added this to the genesis_header hook: <code><div id=”welcome-text-anchor”><a href=”#welcome-text-anchor”></a></div></code>.

    Next to that, I added this to the functions.php:

    <code>

    if ( ! isset( $content_width ) ) $content_width = 708;

    /************************* Welcome text *************************/

    /** Register widget areas */
    genesis_register_sidebar( array(
    ‘id’ => ‘welcome-text’,
    ‘name’ => __( ‘Welcome Text’, ‘genesis’ ),
    ‘description’ => __( ‘This is the welcome text widget.’, ‘themename’ ),
    ) );

    /** Add the welcome text section */
    add_action( ‘genesis_before’, ‘custom_welcome_text’ );
    function custom_welcome_text() {
    if ( is_home() )
    genesis_widget_area( ‘welcome-text’, array(
    ‘before’ => ‘<div class=”welcome-text widget-area”>’,
    ) );
    }
    /** Custom Read More link for Genesis Post Excerpts */
    function custom_read_more_link() {
    return ‘ <a href=”‘ .get_permalink() .’” rel=”nofollow”>Lees verder…</a>’;
    }
    add_filter( ‘excerpt_more’, ‘custom_read_more_link’ );
    add_filter( ‘get_the_content_more_link’, ‘custom_read_more_link’ );
    add_filter( ‘the_content_more_link’, ‘custom_read_more_link’ );
    // Change height custom header
    add_theme_support( ‘genesis-custom-header’, array(
    ‘flex-height’ => true,
    ‘height’ => 380,
    ‘width’ => 1080
    ) );
    /** Remove the site title */
    remove_action( ‘genesis_site_title’, ‘genesis_seo_site_title’ );</code>

    And this to the style.css:

    <code>

    /* Verberg footer */
    #footer {
    display: none;
    }
    /* Padding onder widgets homepagina */
    .widget-area .textwidget {
    padding-bottom: 2rem;
    }
    /* H1 kleiner maken */
    h1,
    .entry-title,
    .entry-title a {
    font-size: 32px;
    font-size: 2rem;
    }
    /* Welcome Text (de big bold header)
    ———————————————————— */

    /* Fullscreen */
    body, html {
    height: 100%;
    }

    .welcome-text {
    height: 100%;
    overflow: hidden;
    }

    .welcome-text p {
    font-size: inherit;
    margin: 0;
    }

    /* Verticaal en horizontaal centreren */
    #welcome-text-content {
    position:absolute;
    top: 50%;
    left: 50%;
    height:384px;
    width: 768px;
    margin-top:-192px;
    margin-left: -384px;
    }

    /* Niet zichtbaar maken bij 768px en minder */
    @media only screen and (max-width: 768px) {
    .welcome-text {
    display: none;
    }

    }

    /* Fade-effect voor logo’s in footer */
    .fade-effect {
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

    .fade-effect:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    }
    /* Hoogte header aanpassen */
    #header {
    min-height: 380px;
    overflow: hidden;
    }</code>

    Hope you can help me out here!

    #30936

    larsvanzanten
    Participant
    Post count: 8

    Hmm… <code> tags not working… Still, hope you can help me :-)

    #31171

    weslinda
    Participant
    Post count: 193

    Thanks for posting that, answer is in the code you posted. You’ve pulled the link out of the header with the code.  That pulls out the title which when you add the logo, replaces the text with a link over the header image.  Delete that line and all should work with a link over the logo.

    remove_action( ‘genesis_site_title’, ‘genesis_seo_site_title’ );


    Loving the Genesis Life!

    #31257

    larsvanzanten
    Participant
    Post count: 8

    Unfortunately, that doesn’t work. When I remove that line a pink bar appears on the header, like this:

    <a href=’http://postimage.org/’ target=’_blank’><img src=’http://s11.postimg.org/mxjbuiv3n/Schermafbeelding_2013_03_26_om_08_07_44.png’ border=’0′ alt=”Schermafbeelding 2013 03 26 om 08 07 44″ /></a><br /><a target=’_blank’ href=’http://postimage.org/’>free picture hosting</a><br /><br />

     

    FYI: In the Appearance –> Header settings, the “Show header text with your image.”-option is not on.

    #31276

    weslinda
    Participant
    Post count: 193

    So it actually is working, just need to do some CSS styling to clear that box out.  Once the CSS is updated, then you’ll be right back to it.  You’ll want to clear the background of the box that it found and test to tune.    In the CSS, you’ll want to look for section 3C, and then any item that begins with .header-image is where you’ll find the CSS covering that box.  Looks like it starts on line 516 in the original css file.


    Loving the Genesis Life!

    #31335

    larsvanzanten
    Participant
    Post count: 8

    Yeah! Adding background-color: transparant to the .header-image #title element did the trick. Thanks a lot, love Genesis AND the community!

    #31342

    weslinda
    Participant
    Post count: 193

    Glad to help and glad is working well.  Only thing I would suggest is maybe looking at updating the link with an anchor that will take them to the main content on the homepage and not your greeting image.  Might not be nice from a user experience.


    Loving the Genesis Life!

    #31464

    larsvanzanten
    Participant
    Post count: 8

    Didn’t think of that yet. Fixed it immediately. Thanks a lot, again!

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

You must be logged in to reply to this topic.