Learning Genesis – Custom Header image

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

This topic is: resolved

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  colkav 1 year, 11 months ago.

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

    colkav
    Participant
    Post count: 38

    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

    #8928

    Davinder Singh Kainth
    Participant
    Post count: 1463

    Look following section in style.css file

    /* Image Header – Partial Width
    ———————————————————— */

    and then add following code for logo[css]
    <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;
    }

    [/css]

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


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #8940

    colkav
    Participant
    Post count: 38

    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

    #9125

    Davinder Singh Kainth
    Participant
    Post count: 1463

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


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #9134

    colkav
    Participant
    Post count: 38

    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.