Replacing WordPress Twenty Eleven #site-title with an image

With the release of WordPress 3.2 comes a new default theme, Twenty Eleven. It’s a nice minimalist theme with lots of open, clean space. It loads fast and embraces the concept that less is more. I really like that.

That doesn’t mean it shouldn’t be tweaked. What’s the point of having a WordPress blog if you aren’t going to tweak code?

One of the things I like to do when tweaking a theme is to replace the main h1 header text with an image. Twenty Eleven doesn’t use h1, it uses #site-title to create the main header. If you would like to replace your blog’s main title with an image, you first need to create a child theme based on Twenty Eleven. You don’t want to ever customize the default WordPress theme. If you do, all your hand crafted customization will be over written the next time you install a WordPress update. Take it from me, that’s not good. There are many fine references on how to create a WordPress child theme. I recommend that you check them out and create a child theme.

Once you have created a child theme and activated it, you should open style.css and add the following bit of code:
[php]#site-title {
text-indent: -9999px;
width: 230px; /* width of the image file. */
height: 55px; /* height of the image file. */
margin:30px 0 0 0;
background: url(header.png) #fff no-repeat;
font-size: 1px;
line-height: 1px;
text-decoration: none;
}[/php]

Make sure to change the width and height to the actual width and height of the image file you are using. You will also want to adjust the margin values until it looks right.

UPDATE: If you want to make the #site-title a clickable link, you will need to place a copy of header.php in your child theme and replace:

[php]
<h1 id="site-title">
[/php]
With the following:
[php]
<h1 id="site-title" onclick="location.href=’http://richardrottman.com/bentcorner.com/';" style="cursor: pointer;">
[/php]
You will want to change the url to your blog’s url.

Comments

    • says

      I watched the video. Personally, I thought it was more complicated then the above procedure. The video required editing the php code found in the header, while the above procedure (other than they clickable part) only requires editing the stylesheet.

      Being able to click on the site title doesn’t seem all that important in Twenty Eleven, considering that the “Home” link is located directly below the site title.

  1. says

    why isn’t it working for me?
    I did the child theme and then put this in the stylesheet.

    #site-title {
    text-indent: -9999px;
    width: 230px; /* width of the image file. */
    height: 55px; /* height of the image file. */
    margin:30px 0 0 0;
    background: http://designbycarey.com/wp-content/uploads/2011/08/logo.jpg #fff no-repeat;
    font-size: 1px;
    line-height: 1px;
    text-decoration: none;
    }

    i tried adjusting the sizes too but all i get is a blank white space. thanks so much!

    • says

      Change:

      background: /logo.jpg white no-repeat;
      

      To:

      background: url(/logo.jpg) #fff no-repeat;
      

      You’ll also want to move the actual image file to the root directory.

        • says

          It’s the main directory where your blog resides. Same directory as all of your WordPress files and folders (wp-includes, wp-content, wp-admin) reside.

  2. Paul says

    Hi Guys,

    Does anyone know the best way to retain the title and tag line, but to include a right aligned background image in the top part?

    The method above removes the title and tag line entirely.

  3. says

    Hi,

    Ive tried your method and in putted the following:

    #site-title {
    text-indent: -9999px;
    width: 230px; /* width of the image file. */
    height: 55px; /* height of the image file. */
    margin:30px 0 0 0;
    background: url(/public_html/jolly rocker1.gif) #fff no-repeat;
    font-size: 1px;
    line-height: 1px;
    text-decoration: none;
    }

    However now the text title has disappeared but i am left with just a blank white space. Please see website http://www.jollyrockers.co.uk

    Any idea what ive done wrong?

    Many thanks

  4. says

    Just to update ive tried changing the size to the exact size of the image but still no cigar. (also the image url has changed due to me using a different image):

    }
    #site-title {
    text-indent: -9999px;
    width: 230px; /* width of the image file. */
    height: 55px; /* height of the image file. */
    margin:30px 0 0 0;
    background: url(/public_html/jolly-rocker1web.gif) #fff no-repeat;
    font-size: 1px;
    line-height: 1px;
    text-decoration: none;
    }

    cheers

  5. says

    @Louis: Try the following:

    #site-title {
    text-indent: -9999px;
    width: 400px;
    height: 197px;
    margin: 30px 0 0 0;
    background: url(/jolly-rocker1web.gif) white no-repeat;
    font-size: 1px;
    line-height: 1px;
    text-decoration: none;
    }

    Basically, the absolute path to the image file needs to be corrected along with the size of the image. Past the above code in your css and it should work.

  6. says

    Fantastic that has worked. Just got to play around with the image size now as its rather large.

    Thanks very much Rick- Really appreciate the help!

    Cheers

    Louis

  7. says

    Rick,

    Just another quick question that you might be able to help me with. I’ve copied over your code which worked a treat. If you look at the website i would like to reduce the space between the logo and the tag description and also the tag description to the header image.

    How can i do this?

    I’d like the description directly below the image and the gap to between the description to the header to be one line/paragraph.

    Many thanks in advance

    Louis

  8. says

    @Louis: Change the value of the height to 148px. It’s currently at 197px. Also, if you want to further decrease the white space between the header image and the description, you will need to edit the image. It has white space at the top and the bottom of the image file.

  9. says

    Many thanks Rick, the change to 148 has made a good difference.

    The header image (three children with rockers) doesnt appear to have any white space above or beneath it? I checked this by double checking my source file.

    Perhaps im misunderstanding?

    Cheers

    Louis

  10. says

    Ah right :-). Well im happy with the space between the logo and the description. Any idea how to reduce the space between the description and the header image.

    Many thanks

    Louis

  11. says

    @Rick Rottman: Rick, unfortunately not, ive just been googling as we speak and have come across the need for a child theme. I wasnt aware of this before.

    Is there anyway to fix this? Now im rather worried.

    Many thanks

  12. says

    @Louis:Take your stylesheet and back it up. Then, replace it on your site with the default stylesheet and see if that changes anything. If it does, then you know the problem is with the stylesheet.

  13. says

    @Louis: That’s good. Now you know it’s not the style sheet. Now you can put your custom style sheet back.

    After you do that, try replacing your php files with the default ones. I’d first try replacing the header php file.

  14. says

    @Rick: No change with the header swapped for a fresh one. I’ll go through each PHP.

    Should i start from a clean install of wordpress and create a child theme etc?

  15. says

    @Louis: I’d go with a fresh install and then create a child theme. Then, do all your editing on the child theme. It’s much easier that way, plus, if something gets broken, you can easily fix it.

  16. says

    @Louis: Yes and no. You can do all your customizing using the built-in editor in WordPress. That’s what I do. I first make the edit using Firebug. It’s a Firefox extension that allows you to edit live pages within your browser. It doesn’t over-write your code on the site, just what you are seeing. Once you change something to your liking, copy the css and paste it into your stylesheet. There are videos online that show you how to use it.

    Google Chrome comes built in with a took that is just like Firebug.

  17. says

    @Rick Rottman: Rick,

    Good news, ive started again from the start. New wordpress install. I’ve created a child theme and ive made the changes to the logo. All is well.

    Now, im apprehensive about swapping out the site-description text – if it goes wrong again is there a easy way of reverting it now im in a child theme?

    cheers

    Louis

  18. says

    Also many thanks on the info about the Firebug. I use Google Chrome so i’ll have a look for this tool. Sounds like it’ll save me from breaking this site again :)

    Louis

  19. says

    @Louis: The wonderful thing about using a child theme is that if something breaks, you can just remove that piece of code from the style sheet and the code found in the parent theme’s style sheet will be used.

  20. says

    @Louis: If you are already using Chrome, just right-click on the area you want to change and select Inspect Element. It will then open up on the bottom of your screen and you can change the code in the right panel.

  21. says

    Hi Rick

    can you help me sort out this logo i am trying to put on twenty eleven theme

    i have a child version and have input this I get the logo but its huge !!

    wp_head();
    ?>

    <body >

    <?php

    Thanks in Advance

    Dave

    • says

      @dave: I think the problem is that you used Twenty Eleven’s built-in header image uploader to upload the images. When you do that, Twenty Eleven stretches the image to match 1000 pixels.

      You will need to use an FTP program to place them into your child theme’s image folder. Then, you can customize the your child’s stylesheet to make it do what you want to do.

      • says

        Hi Rick

        Thanks for that i was totally lost and still am a bit new to all this had a look in the ftp program but not sure where to upload image pic to.

        sorry

        dave

        • says

          Hi Rick

          went in to wp-content then themes and copied file images accross to child theme

          but the images file had header etc but uploads is in a file further down

          I seem to be messing this up

          Dave

        • says

          @Dave: The wp-content/images folder is really for uploading images for individual posts and pages. You’ll want to upload any images used for the theme in the /wp-content/themes/name_of_your_child_theme/images folder.

        • says

          Hi Rick

          ok did that and have changed the coding to

          wp_head();
          ?>

          <body >

          <?php

          but it still right across the top

          sorry about all this but thanks for the help

          dave

  22. says

    Dave,

    Copy and paste the following into the style.css of your child theme:

    #site-title {
       text-indent: -9999px;
       width: 205px;  /*  width of the image file. */
       height: 75px;  /*  height of the image file. */
       margin:30px 0 0 0;
       background: url(./images/t_logo1.png) #000 no-repeat;
       font-size: 1px;
       line-height: 1px;
       text-decoration: none;
    }
    

    I’ve edited it so it should work on your site.

    • says

      hi Rick

      have pasted that in to stylesheet now looks like this

      /*
      Theme Name: Twentyeleven Child
      Description: Child theme for the twentyeleven theme
      Author: Dave Munday
      Template: twentyeleven
      */

      @import url(“../twentyeleven/style.css”);

      .singular .entry-title {
      font-size: 26px;

      #site-title { text-indent: -9999px; width: 205px; /* width of the image file. */ height: 75px; /* height of the image file. */ margin:30px 0 0 0; background: url(./images/t_logo1.png) #000 no-repeat; font-size: 1px; line-height: 1px; text-decoration: none; }

      I have also put header in child theme back to original with no mods.

      still looks large sorry thought this was going to be easier

      dave

      • says

        @Dave: Copy and paste the following into the child’s style.css, overwriting everything with this:

        /*
        Theme Name: Twentyeleven Child
        Description: Child theme for the twentyeleven theme 
        Author: Dave Munday
        Template: twentyeleven
        */
        
        /* We must first include the original css from the parent theme */
        @import url("../twentyeleven/style.css");
        
        /* Without explicitly setting the margin we're inheriting 
        a value of "0" which isn't allowing space for the sidebar */
        .singular #primary {
        	margin: 0 -26.4% 0 0;
        }
        #site-title {
           text-indent: -9999px;
           width: 205px;  /*  width of the image file. */
           height: 75px;  /*  height of the image file. */
           margin:30px 0 0 0;
           background: url(./images/t_logo1.png) #000 no-repeat;
           font-size: 1px;
           line-height: 1px;
           text-decoration: none;
        }
        
        • Dave says

          hi rick thats tided up the front page I have just put the logo on the picture rather than above as it seems to work just need to tidy it up a bit.

          On the site I am looking at using contact form 7 as a online entry methord can that be presented better I would like to shorten the boxes and put some side by side to make it look neater.

          thanks for all your help

          Dave

  23. says

    Hummhumm – I have something about the same as most of you here – but as you see both logo and title left – and right centered. BUT – if I make the window smaller – the logo jumps up. I tried with margin first – but only got it to work with padding. Any advices for poor me making the logo stay in place?
    My CSS

    #site-title {

    float:right;
    align: right;
    position:absolute;
    right:-250px;
    bottom: 40px;

    }

    #site-title a {
    color: white;
    margin-top: 80px;
    padding: 205px 0px 0px 90px; /* allow space for image */
    background-image: url(./images/mp_logo_outline.png);
    background-repeat: no-repeat;
    }

    #site-title a:hover { color: #DDDDDD; }

    #site-description {
    float: right;
    color: #white;
    font-size: 14px;
    position:absolute;
    right:-250px;
    bottom: -40px;
    font-size:110%;
    color: white;
    }

  24. says

    Hello Rick R,
    I see you have answered very nicely and solved all of the problems too about adding logo in twenty eleven. Would you kindly tell me step by step method how can I add logo before the title of my site. I have uploaded logo to my child theme. Now how can I proceed?

  25. says

    Hello Rick, Thanks so much for the great blog! I need to revisit the “add a logo to CSS” issue…when I use the CSS edit to the child theme, it pulls some of the logo, but not all of it. The logo is 432px wide, 200px high…here’s the code I put into the file:

    /* Custom logo */
    #site-title {
    text-indent: -9999px;
    width: 432px; /* width of the image file. */
    height: 200px; /* height of the image file. */
    margin:30px 0 0 0;
    background: url(/wp-content/themes/twentyeleven/images/logo.png) #fff no-repeat;
    font-size: 1px;
    line-height: 1px;
    text-decoration: none;
    }

    /*end custom logo */

    The site, such as it is, is woodlandcomm.com; and no surprise, I’m a rank beginner at this. Can you help? Thanks!

  26. says

    Hey Rick, thanks! I believe you were right. (Took me long enough to get back to you…) This blog has really been very helpful to me. I’m now trying to indent my logo to the right a bit…I’ll keep you posted.
    ;-) Thanks again!!

Leave a Reply

Your email address will not be published. Required fields are marked *


1 + nine =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>