WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Twenty Twelve] Replace Site Title With Image (12 posts)

  1. Peter Wilson
    Member
    Posted 7 months ago #

    I am totally new to this so please bear with me. I have installed Twenty Twelve and created a Child Theme. I want to replace the Site Title with an Image and have made the following changes I found on a closed thread :

    edit header.php

    insert this before <hgroup>:

    <img class="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png" alt="site logo" />
    this assumes that the site-logo.png is saved in an /images folder of the child theme.

    add this to style.css to hide the site title and tag line and restrict the size of the logo for small screens:

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

    This has worked to a point but the image appears as a file icon as opposed to the image itself. Can someone explain where I have gone wrong.

  2. kaniamea
    Member
    Posted 7 months ago #

    Go to Appearance => Header and select the image you want to replace the site title with. If you want to remove the header text, uncheck "Show header text with your image".

  3. Peter Wilson
    Member
    Posted 7 months ago #

    Thanks for the reply, however I may have not been as clear as I could have been. When I do as you suggest it replaces the Twenty Twelve and strapline with my logo but the menu moves upwards. What I am trying to achieve is a small logo above the menu to replace the Twenty Twelve Theme title and then place a larger banner image below the menu. If this is possible. I have learned so much in the past 48 hours that it is only this issue and one with the menu / sub-menu that I need to resolve. Since my initial post I have reverted back to the original header.php and style.css. Kind regards,

  4. batharoy
    Member
    Posted 7 months ago #

    You can use a little css trickery to get the effect you want.
    Make sure the Header Text check box IS checked under Appearance > Header.

    .site-header h1 a {
        background-image: url(LINK TO LOGO HERE);
        background-size: contain;
        background-repeat: no-repeat;
        color: transparent;
        line-height: 80px;
    }
    
    .site-header h1 a:hover {
        color: transparent;
    }
    
    .site-header h2 {
        display: none;
    }
  5. Peter Wilson
    Member
    Posted 7 months ago #

    Thanks Batharoy, I will give that a go. I am very new to all this so can you confirm that we are talking about editing the style.css - is there a specific point within the file that this coding needs to be placed - what is the syntax for the url. I was just going to upload an image to my images folder within the child theme folder.

  6. batharoy
    Member
    Posted 7 months ago #

    If your using a child theme, add it to the bottom of style.css.
    Otherwise use a custom css plug-in and add it through that.
    Just take the full address of the image and paste over LINK TO LOGO HERE

  7. Peter Wilson
    Member
    Posted 7 months ago #

    Ah, I take it a custom.css plug in allows you to keep the changes separate so you have a record of what changes you have made. If my image is uploaded to /public_html/wp-content/themes/twentytwelve-child-01/images/sitelogo.jpg then what is the correct syntax for the url.

  8. batharoy
    Member
    Posted 7 months ago #

    Go into Media > Library, select edit on the image you want. On the right side is a File URL field, click that then Ctrl+A then Ctrl+C to copy the address.

  9. Peter Wilson
    Member
    Posted 7 months ago #

    Hmmmmm, tried that but didn't do what I expected. So I'm guessing I might not have done it correctly. What has happened is that the strap line has disappeared but there's no image and that main theme title has remained. I copied your suggested coding to the bottom of the style.css file in my child theme directory and copied the url using the instructions you gave above. Here is the code

    @import url('../twentytwelve/style.css');

    .site-header h1 a {
    background-image: url(http://www.wilsonsdance.co.uk/?attachment_id=100);
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    line-height: 80px;
    }

    .site-header h1 a:hover {
    color: transparent;
    }

    .site-header h2 {
    display: none;
    }

  10. batharoy
    Member
    Posted 7 months ago #

    The url you entered is for a images page rather than the image.
    Try this :
    http://www.wilsonsdance.co.uk/wp-content/themes/twentytwelve-child-01/images/sitelogo.jpg
    If that doesn't work go to the image in Media > Library again.
    Use the File URL: above the update button on the right NOT the link at the top of the page.

  11. Peter Wilson
    Member
    Posted 7 months ago #

    My friend, you are a star. That works a treat. How are you with menus / sub-menus as I raised a support question a couple of hours ago

    http://wordpress.org/support/topic/adding-a-menu-sub-menu?replies=1

    Many thanks, Peter

  12. Jelle Beijer
    Member
    Posted 5 months ago #

    Hi Peter, this solution almost did it for me, thx!

    Question: I used an image size of 250x500 px. However it is downsized. Can I modify the code so the image is displayed in its original size, how do I do that?

    Thx

Reply

You must log in to post.

About this Topic