July 10, 2011 by Rick Rottman
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:
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;
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.
With the following:
<h1 id="site-title" onclick="location.href=’http://richardrottman.com/bentcorner.com/';" style="cursor: pointer;">
You will want to change the url to your blog’s url.