Learning Genesis – Custom Header image

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

This topic is: resolved


This topic contains 4 replies, has 2 voices, and was last updated by  colkav 2 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #8925



    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.



    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.



    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).



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



    That worked perfectly, many thanks!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Learning Genesis – Custom Header image’ is closed to new replies.