Sridhar Katakam

Genesis and WordPress Tutorials

    • For Hello! Pro (1.5.1), make these changes:

      a) In functions.php replace

      add_theme_support( 'custom-header', array(
    'width'           => 320,
    'height'          => 110,
    'header-selector' => '.site-title a',
    'header-text'     => false
) );

      with

      add_theme_support( 'custom-logo', array(
    'width'       => 320,
    'height'      => 110,
    'flex-width' => true,
    'flex-height' => true,
) );

      b) Replace the entire CSS from Step 2 with

      .wp-custom-logo .title-area {
    max-width: none;
    margin-top: 0;
    width: auto;
}

.wp-custom-logo .site-title {
    text-indent: 0;
    border-bottom: none;
}

.wp-custom-logo .site-title,
.sticky .site-title {
    margin: 7px 0;
}

.wp-custom-logo .site-title > a {
    min-height: 0;
}

.custom-logo-link {
    display: block;
}

.custom-logo {
    vertical-align: top;
}

.wp-custom-logo .site-title > a img {
    max-width: 320px;
    vertical-align: middle;
    margin-left: 20px;
}

.site-name {
    vertical-align: middle;
}

.site-header .widget-area,
.site-header .search-form {
    width: auto;
}

.wp-custom-logo .sticky .site-title > a img {
    max-width: 160px;
}

/* ## Screen Reader Text
--------------------------------------------- */

.screen-reader-text,
.screen-reader-text span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: #fff;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto !important;
    color: #333;
    display: block;
    font-size: 1em;
    font-weight: bold;
    height: auto;
    padding: 15px 23px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

@media only screen and (max-width: 1200px) {

    .wp-custom-logo .site-header {
        padding-top: 15px;
    }

    .wp-custom-logo .title-area {
        float: none;
        text-align: center;
    }

    .wp-custom-logo .site-header .widget-area {
        float: none;
        margin: 0 auto;
        text-align: center;
    }

    .wp-custom-logo .title-area p {
        width: auto;
    }

}

@media only screen and (max-width: 800px) {

    .wp-custom-logo .site-header .widget-area {
        margin: 10px 0;
    }

    .wp-custom-logo .title-area {
        float: none;
    }

    .site-name {
        display: block;
    }

    .wp-custom-logo .site-title > a img {
        margin-left: 0;
        margin-top: 10px;
    }

}
      Reply

  • Hi Sridhar,

    I am tying to do this with the Monochrome Pro theme but with the logo on left and site title next to it. Do you have a tutorial for this?

    Thanks!

    Reply
    • >