Last active
April 14, 2025 07:19
-
-
Save srikat/72abc6a647d35dbdf594 to your computer and use it in GitHub Desktop.
How to use a inline logo in Genesis instead of a background image. http://www.sridharkatakam.com/use-inline-logo-instead-background-image-genesis/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a img { | |
margin-bottom: 0; | |
} | |
.site-title a img { | |
vertical-align: top; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.title-area { | |
padding-top: 10px; | |
} | |
.site-title { | |
margin-bottom: 0; | |
} | |
.site-title a, .site-title a:hover { | |
padding-top: 0; | |
} | |
a img { | |
margin-bottom: 0; | |
} | |
.site-title a img { | |
vertical-align: top; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************** | |
* | |
* Replace Header Site Title with Inline Logo | |
* | |
* @author AlphaBlossom / Tony Eppright | |
* @link http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/ | |
* | |
* @edited by Sridhar Katakam | |
* @link https://sridharkatakam.com/use-inline-logo-instead-background-image-genesis/ | |
* | |
************************************/ | |
add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 ); | |
function custom_header_inline_logo( $title, $inside, $wrap ) { | |
$logo = '<img src="' . get_stylesheet_directory_uri() . '/images/logo.png" alt="' . esc_attr( get_bloginfo( 'name' ) ) . ' Homepage" width="200" height="100" />'; | |
$inside = sprintf( '<a href="%s">%s<span class="screen-reader-text">%s</span></a>', trailingslashit( home_url() ), $logo, get_bloginfo( 'name' ) ); | |
// Determine which wrapping tags to use | |
$wrap = genesis_is_root_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p'; | |
// A little fallback, in case an SEO plugin is active | |
$wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap; | |
// And finally, $wrap in h1 if HTML5 & semantic headings enabled | |
$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap; | |
return sprintf( '<%1$s %2$s>%3$s</%1$s>', $wrap, genesis_attr( 'site-title' ), $inside ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.header-image .site-title > a { | |
background: transparent; | |
} | |
.header-image .site-title { | |
text-indent: 0; | |
} | |
.site-title img { | |
vertical-align: top; | |
} | |
.title-area { | |
padding: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* Add support for custom header | |
add_theme_support( 'custom-header', array( | |
'width' => 260, | |
'height' => 100, | |
'header-selector' => '.site-title a', | |
'header-text' => false | |
) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* Remove the site description | |
remove_action( 'genesis_site_description', 'genesis_seo_site_description' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.site-title img { | |
vertical-align: top; | |
} | |
.title-area { | |
padding-top: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.site-title a, .site-title a:hover { | |
padding: 0; | |
} | |
.site-title img { | |
vertical-align: top; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.site-description { | |
text-indent: -9999px; | |
height: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.site-title img { | |
vertical-align: top; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ## Screen Reader Text | |
--------------------------------------------- */ | |
.screen-reader-text, | |
.screen-reader-text span { | |
position: absolute !important; | |
clip: rect(0, 0, 0, 0); | |
height: 1px; | |
width: 1px; | |
border: 0; | |
overflow: hidden; | |
} | |
.screen-reader-text:focus { | |
clip: auto !important; | |
height: auto; | |
width: auto; | |
display: block; | |
font-size: 1em; | |
font-weight: bold; | |
padding: 15px 23px 14px; | |
color: #333; | |
background: #fff; | |
z-index: 100000; /* Above WP toolbar. */ | |
text-decoration: none; | |
box-shadow: 0 0 2px 2px rgba(0,0,0,.6); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment