Community Forums › Forums › Archived Forums › General Discussion › Retina logo woes
Tagged: mindful theme, retina, retina logo
- This topic has 3 replies, 2 voices, and was last updated 7 years, 6 months ago by
genesisnewbie.
-
AuthorPosts
-
May 27, 2016 at 12:19 am #186363
genesisnewbie
MemberTrying to add retina logo (Mindful theme).
I have the logo.png at actual size and the [email protected] at twice the original size, both in uploads and in the images folder. My header looks like this:
/** Custom Logo */ add_theme_support( 'wp_head', 'zp_custom_logo', array( 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 95, 'width' => 280, ) ); add_action( 'wp_head', 'zp_custom_logo' ); function zp_custom_logo( ) { if ( genesis_get_option( 'zp_logo', ZP_SETTINGS_FIELD ) ) { ?> <style type="text/css"> .header-image .site-header .title-area { background-image: url( "<?php echo genesis_get_option( 'zp_logo', ZP_SETTINGS_FIELD ); ?>" ); background-position: center center; background-repeat: no-repeat; height: <?php echo genesis_get_option( 'zp_logo_height', ZP_SETTINGS_FIELD );?>px; width: <?php echo genesis_get_option( 'zp_logo_width', ZP_SETTINGS_FIELD );?>px; } .header-image .title-area, .header-image .site-title, .header-image .site-title a{ height: <?php echo genesis_get_option( 'zp_logo_height', ZP_SETTINGS_FIELD );?>px; width: <?php echo genesis_get_option( 'zp_logo_width', ZP_SETTINGS_FIELD );?>px; } </style> <?php } }
and css like this:
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .header-image .site-title > a { float: left; min-height: 95px; width: 100%; background: url('http://www.mindfulnessperth.com.au/wp-content/uploads/2016/05/logo.png') no-repeat center center !important; background-size: 280px 95px !important; } }
the retina is displaying but it's behind (or on top of) the normal logo. How can make the correct logo load on the appropriate device?
http://www.mindfulnessperth.com.au/May 27, 2016 at 7:34 pm #186403Christoph
MemberHi,
I would follow Marcy's great tutorial here: https://amethystwebsitedesign.com/add-retina-logo-to-genesis-or-wordpress-themes/
May 29, 2016 at 11:12 pm #186486genesisnewbie
MemberThanks for the link, but this doesn't with the Mindful theme as there is no 'Header' under 'Appearance'. 🙁
May 29, 2016 at 11:41 pm #186487genesisnewbie
MemberGot it working as follows:
In functions.php - changed height and width for custom logo:
add_theme_support( 'wp_head', 'zp_custom_logo', array( 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 190, /* 2x actual logo height */ 'width' => 560, /* 2x actual logo width */ ) );
Then added this to custom style sheet:
`
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.header-image .site-title > a {
float: left;
height: 95px; /*Actual displayed logo height */
width: 280px; /*Actual displayed logo width */
background: url('[email protected]') no-repeat center center!important; /* link to retina logo */
background-size: 280px 95px !important;
}
p.site-title {
max-height: 95px;
}
} -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.