Community Forums › Forums › Archived Forums › Design Tips and Tricks › Metro: image header link to homepage
- This topic has 11 replies, 3 voices, and was last updated 11 years, 1 month ago by larsvanzanten.
-
AuthorPosts
-
March 22, 2013 at 2:20 am #30381larsvanzantenMember
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...
March 22, 2013 at 9:47 am #30448weslindaMemberCan 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!
March 22, 2013 at 2:44 pm #30563AngelaEloiseMemberI'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?
March 23, 2013 at 8:33 am #30666weslindaMemberAngela, 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!
March 24, 2013 at 12:39 pm #30935larsvanzantenMemberWell, 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!
March 24, 2013 at 12:40 pm #30936larsvanzantenMemberHmm... <code> tags not working... Still, hope you can help me 🙂
March 25, 2013 at 2:22 pm #31171weslindaMemberThanks 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!
March 26, 2013 at 1:10 am #31257larsvanzantenMemberUnfortunately, 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.
March 26, 2013 at 6:03 am #31276weslindaMemberSo 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!
March 26, 2013 at 10:07 am #31335larsvanzantenMemberYeah! Adding background-color: transparant to the .header-image #title element did the trick. Thanks a lot, love Genesis AND the community!
March 26, 2013 at 11:04 am #31342weslindaMemberGlad 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!
March 27, 2013 at 1:41 am #31464larsvanzantenMemberDidn't think of that yet. Fixed it immediately. Thanks a lot, again!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.