• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Learning Genesis – Custom Header image

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Learning Genesis – Custom Header image

This topic is: resolved

Tagged: Custom header

  • This topic has 4 replies, 2 voices, and was last updated 10 years, 1 month ago by colkav.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 2, 2013 at 6:31 am #8925
    colkav
    Member

    Hi,

    I'm just starting out with Genesis, using the sample child theme, and the tutorial - How to set up the custom header function, here http://my.studiopress.com/tutorials/setup-custom-header/

    The site i'm working on is here: http://clienttest2.macsupportedlondon.co.uk/

    I want to put an logo image in the top left of the header, with dimensions of 100px high by 450px in length.

    Is the best practice to control this element via the functions.php file, or via the WordPress->Appearance->Header menu?

    If it's manually / via the functions.php file, I've copied the logo image, AA_logo.gif, into the child themes Images folder.

    Not knowing PHP, based on the tutorial mentioned above, here's my guess on how i might get this image to show:

    /** Add support for custom header **/
    add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100, 'header_image' => images/AA_logo.gif ) );

    Which doesn't seem to work. Any thoughts or suggestions much appreciated.

    colkav

    January 2, 2013 at 7:08 am #8928
    Davinder Singh Kainth
    Member

    Look following section in style.css file

    /* Image Header - Partial Width
    ------------------------------------------------------------ */

    and then add following code for logo

    <pre>/* Image Header - Partial Width
    ------------------------------------------------------------ */
    .header-image #header #title-area {
     background: url(images/logo.png) left top no-repeat;
     }
    
    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
     display: block;
     float: left;
     height: 100px;
     overflow: hidden;
     padding: 0;
     text-indent: -9999px;
     width: 420px;
    }
    
    .header-image #description {
     display: block;
     overflow: hidden;
    }
    
    

    You can modify logo dimensions in above code. Name of the logo image is logo.png and add it to theme's images folder.


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    January 2, 2013 at 9:16 am #8940
    colkav
    Member

    Thanks for your reply, idavinder. I tried as you suggested:

    I created / placed an image called 'logo.png' inside the child/images folder.

    Replaced the code in style.css under /* Image Header - Partial Width
    ------------------------------------------------------------ */
    with what you suggested.

    I tried with that pre you've included at the beginning, and without it.

    The path , I've used images/logo.png. However, I haven't managed to get it working.

    Is this a different method to that suggested in the tutorial, How to set up the custom header function, here , or is it dependent on this? (I've updated functions.php to reflect the new path, images/logo.png).

    Thanks

    January 3, 2013 at 1:02 am #9125
    Davinder Singh Kainth
    Member

    Once make above code changes, goto Apperance > Header and then uncheck "Show header text with your image". It should work now.


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    January 3, 2013 at 3:28 am #9134
    colkav
    Member

    That worked perfectly, many thanks!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Learning Genesis – Custom Header image’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble