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.

#WordPress

Comments

  1. Keith - July 12, 2011 @ 10:50 am

    Is it just me or does this method also remove the link from the site title?

  2. Jose - July 12, 2011 @ 1:28 pm

    I found a video tutorial on Vimeo that shows how to replace the site title with an image while keeping it clickable.

    http://vimeo.com/26107199

    This also gets around the need to text-indent -9999.

  3. Rick Rottman - July 13, 2011 @ 9:35 am

    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.

  4. carey - August 3, 2011 @ 10:35 pm

    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!

  5. Rick Rottman - August 3, 2011 @ 11:04 pm

    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.

  6. carey - August 4, 2011 @ 10:17 am

    thank you so much for your response! I’m having a terrible time. Is the root directory the child theme folder or something else?

  7. Rick Rottman - August 4, 2011 @ 10:28 am

    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.

  8. Paul - September 26, 2011 @ 8:01 am

    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.

  9. Louis - December 2, 2011 @ 6:24 am

    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

  10. Louis - December 2, 2011 @ 6:40 am

    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

  11. Rick Rottman - December 2, 2011 @ 7:06 am

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

  12. Louis - December 2, 2011 @ 7:10 am

    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

  13. Louis - December 2, 2011 @ 7:18 am

    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

  14. Rick Rottman - December 2, 2011 @ 7:26 am

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

  15. Louis - December 2, 2011 @ 7:30 am

    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

  16. Rick Rottman - December 2, 2011 @ 7:35 am

    @Louis: Sorry, I meant the logo. The logo image had white space above and below it.

  17. Louis - December 2, 2011 @ 7:37 am

    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

  18. Rick Rottman - December 2, 2011 @ 7:43 am

    @Louis: Yes, change #site-description to the following:

    #site-description {
    color: #7A7A7A;
    font-size: 14px;
    margin: 0 270px 1.25em 0;
    }

  19. Louis - December 2, 2011 @ 7:46 am

    Oh dear Rick, it appears thats not right ha. I didnt stupidly copy the old info before changing it :-S

  20. Louis - December 2, 2011 @ 7:53 am

    Ive replaced the code with the standard code and no changed :-S

  21. Rick Rottman - December 2, 2011 @ 7:58 am

    @Louis: Were you editing anything other then the stylesheet?

  22. Louis - December 2, 2011 @ 8:00 am

    Hi Rick,

    No i simply swapped out the code in the stylesheet. No other changes were made :-S

  23. Rick Rottman - December 2, 2011 @ 8:08 am

    @Louis: You’re not using a child theme?

  24. Louis - December 2, 2011 @ 8:13 am

    @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

  25. Rick Rottman - December 2, 2011 @ 8:16 am

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

  26. Louis - December 2, 2011 @ 8:23 am

    @Rick Rottman: Rick, ive backed up my Style sheet. Redownloaded the TwentyEleven theme and replaced the style sheet but there is still no change.

    This is very strange :-s

  27. Louis - December 2, 2011 @ 8:27 am

    BTW i used FTP to swap the files

  28. Rick - December 2, 2011 @ 8:39 am

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

  29. Louis - December 2, 2011 @ 8:55 am

    @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?

  30. Rick Rottman - December 2, 2011 @ 8:57 am

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

  31. Louis - December 2, 2011 @ 9:05 am

    @Rick Rottman: Thanks Rick.

    The easiest way to do this is manually rather than within WordPress i assume?

    cheers

  32. Rick Rottman - December 2, 2011 @ 9:32 am

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

  33. Louis - December 2, 2011 @ 10:19 am

    @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

  34. Louis - December 2, 2011 @ 10:32 am

    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

  35. Rick Rottman - December 2, 2011 @ 10:41 am

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

  36. Rick Rottman - December 2, 2011 @ 10:42 am

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

  37. Louis - December 2, 2011 @ 10:46 am

    @Rick Rottman: Rick,

    Many thanks for all your help. Really very appreciated :-)

    Louis

  38. dave - December 18, 2011 @ 7:39 am

    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

  39. dave - December 18, 2011 @ 7:41 am

    not sure it copied first time

    wp_head();
    ?>

    <body >

    <?php

  40. Rick Rottman - December 18, 2011 @ 7:52 am

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

  41. Dave - December 18, 2011 @ 8:37 am

    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

  42. Rick Rottman - December 18, 2011 @ 8:40 am

    @Dave: Copy the twentyeleven/images folder and its contents to the child theme. Then put your images there.

  43. Dave - December 18, 2011 @ 9:23 am

    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

  44. Rick Rottman - December 18, 2011 @ 9:36 am

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

  45. Dave - December 18, 2011 @ 10:27 am

    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

  46. Rick Rottman - December 18, 2011 @ 10:48 am

    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.

  47. Rick Rottman - December 18, 2011 @ 10:52 am

    Also Dave, don’t edit anything in the header.php file. The above code should work fine using the unedited default twentyeleven header.php file.

  48. Dave - December 18, 2011 @ 11:11 am

    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

  49. Rick Rottman - December 18, 2011 @ 11:31 am

    @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;
    }
    
  50. Rick Rottman - December 18, 2011 @ 11:35 am

    Dave, if it’s any easier, here is a link to the correct style.css file:

    Link

    Just save it to your computer and then upload it with your FTP program into your child theme.

  51. Dave - December 20, 2011 @ 5:40 am

    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

  52. Lasse - February 24, 2012 @ 8:48 pm

    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;
    }

  53. Ian Eberle - April 18, 2012 @ 6:43 pm

    What widget do you use for your recent posts?

  54. Rick Rottman - April 18, 2012 @ 9:09 pm

    I don’t have a Recent Posts widget.

  55. Abdul Halim - October 7, 2012 @ 6:53 pm

    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?

  56. Rick Rottman - October 7, 2012 @ 8:52 pm

    I think the URL to the image is wrong. your stylesheet is saying the image should be found at:

    http://www.aas-bd.com/wp-content/themes/mychildtheme/images/t_logo1.png

    I don’t see that image when I got to the link. Fix that, and it should work.

  57. Mark - April 15, 2014 @ 10:49 am

    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!

  58. Rick Rottman - April 15, 2014 @ 11:44 am

    Mark, I was able to pull the complete logo in Chrome and IE. What browser are you using? Try refreshing your browser, it might be pulling the old css.

  59. Mark - May 7, 2014 @ 5:40 pm

    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 *

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>