WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
Header title (21 posts)

  1. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    How do I replace header title with graphics (customized logo)?

  2. Tara
    Member
    Posted 1 year ago #

  3. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    Thanks. But the link for the tutorial in that thread is not active.

  4. Tara
    Member
    Posted 1 year ago #

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    start by creating a child theme of Twenty Eleven - do not edit the default theme directly.
    http://codex.wordpress.org/Child_Themes

    then edit header.php in the child theme;

    add your logo image code before:

    <hgroup>

    for example:
    <img class="header-logo" src="{absolute link to your image}" alt="" />
    if your image is saved as logo.png in the /images folder of the child theme, this could look like:
    <img class="header-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="" />

    in style.css of the child theme, add:

    #branding .header-logo { width:auto; max-width: 100%; }
    #branding hgroup { display: none; }

    will need fine tuning of the formatting.
    please post a link if you need support with that.

  6. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    Alchymyth, I followed your code in the child theme in other thread:

    <hgroup>
    <img id="site-logo-image" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />

    And it doesn't work for me.

    Your above code if different than your other suggestion and I can't/don't understand the above suggestion (don't know where to access /images folder of the child theme). Please advise, thanks.

  7. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    don't know where to access /images folder of the child theme

    then use the upload image url:

    <img class="header-logo" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />

    general, to upload the image file into WordPress, you will need to use FTP or the file management system of your hoster; first, you also will need to create the /images folder in your child theme.

  8. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    First, I used this above code:

    <img class="header-logo" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />

    Still not working.

    Secondly, if I had an absolute link to the logo, "http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg", like you suggested in the above code, why do I have to create /images folder in the theme child, which has nothing to do with the link suggested? Confused!

    Thanks

  9. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    And I did upload SoUp4.jpg in /wp-content/uploads/2012/12 folder.

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    if I had an absolute link to the logo, "http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg", like you suggested in the above code, why do I have to create /images folder in the theme child

    just alternatives - the one has nothing to do eith the other.

    some people rather upload any theme related images to the theme's image folder; other people are fine using the absolute links to the images in the media ulpoads folder.

    the result is the same.

  11. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    Can you clarify which one is accurate:

    <hgroup>
    <img id="site-logo-image" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />

    or

    <hgroup>
    <img class="header-logo" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />

  12. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    first of all, remove all other invalid code from style.css of your child theme, after this line first:

    @import url("../twentyeleven/style.css");

    then save a copy of header.php from the parent theme as header.php into the child theme; edit this to add the code.

    both of your posted code alternatives should work;
    you will just need to add the corresponding css class to style.css of your child theme;

    for the first code alternative, use:
    #branding #site-logo-image { width: 300px; max-width: 100%; height: auto; }

    for the second alternative, use:
    #branding .header-logo { width: 300px; max-width: 100%; height: auto; }

    review:
    http://codex.wordpress.org/Child_Themes

  13. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    Where do I add one of these corresponding css class? at the end of header.php in the child theme?

    #branding #site-logo-image { width: 300px; max-width: 100%; height: auto; }
    or
    #branding .header-logo { width: 300px; max-width: 100%; height: auto; }

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I used the wrong words - should read:

    you will just need to add the corresponding styles for the css classes to style.css of your child theme

    yes, these styles need to be added to style.css in the child theme, anywhere after this line:
    @import url("../twentyeleven/style.css");

  15. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    Done everything you suggested and still not working. This is what I've done:

    #branding .header-logo { width: 300px; max-width: 100%; height: auto; }
    <hgroup>
    <img class="header-logo" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>

    when I added this code: #branding hgroup { display: none; }
    The title disappears but still no logo and the header image (I use slide show instead) moves up to the top page. AHHHHH!

  16. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    This is what I've done:

    where have you added that?

    Done everything you suggested and still not working.

    - do you have a copy of header.php in the child theme's folder?

    - have you edited that header.php and added the image code before or after the line with <hgroup>?

    - have you added the style to style.css in the child theme, below this line:
    @import url("../twentyeleven/style.css");

    (btw: I see that you changed that line - change it back to what is was; it needs to point to the parent theme's folder and style.css;

    how many style.css do you have in the 'twentyeleven-child' theme folder?)

  17. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    yes I'm editing a copy of header.php in child theme.

    added <img class="header-logo" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" /> in between <hgroup> and </hgroup>

    I did not change
    @import url("../twentyeleven/style.css");

  18. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    you need to use FTP or the file management syetem of you rhoster, to save header.php in this location:

    /wp-content/themes/twenty-eleven-child/header.php

    not inside of style.css

    style.css of the child theme should only contain so far:

    /*
    Theme Name:     twenty eleven child
    Description:    2011 soup up
    Author:         Donna
    Template:       twentyeleven
    
    (optional values you can add: Theme URI, Author URI, Version)
    */
    
    @import url("../twentyeleven/style.css");
    
    #branding .header-logo { width:auto; max-width: 100%; }

    nothing else;
    you can add more styles when you make more customisations.

    a style.css must not contain any php code.

  19. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    So after I made copy of header.php into my child theme folder, how do I edit it to add this code: <img class="header-logo" src="http://www.soupup.us/wp-content/uploads/2012/12/SoUp4.jpg" alt="" />

    And where should the code go in header.php?

    Thanks

  20. chavaden@yahoo.com
    Member
    Posted 1 year ago #

    I figure it out! thank you.

    On to the new problem. How do I add white spaces top and bottom of the logo?

  21. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    For new issues, consider new threads.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.