Replace Your Blog Title with a Logo
This post is the 2nd installment in my Wordpress Theme Tips series.
I’m sure you’ve noticed that practically all themes that you can download for free, have text in the header which links back to the blogs homepage. I’ll just bet you’ve visited other blogs that have a logo instead of this title text. Trying to figure out things like this can drive you nuts without a little direction. In this post, we’re going to look at replacing anchor text with an image. Creating a logo is not covered here, so we’ll assume you already have an image you want to use.
The easiest way to make this replacement would be to simply delete the text out of your document, and put the image there in it’s place. The only problem with that is the fact that a search engine can’t read what you’ve written in an image. So, the better practice would be to disguise the text with an image. Using CSS, we can leave the HTML text in place, and use a background image to hide it. Sound interesting?
When I change designs on this site, I practically always follow what I’m showing you here. We’ll use this current design as an example. Originally, the header had a plain white background, with the blog title written in blue. To replace this text with my image, I used a method known as the Gilder/Levin Method.
As always, make a backup of both your header.php file as well as style.css. If we mess something up, it won’t be any problem to restore it. Now, open up your header.php file, and we’re going to make a very small change to it. In the h1 element, we want to add span tags where I have them high-lighted in the image below.
Save your changes.
Now let’s open the style.css file and add a little code. All you need is the image you want to use and the image’s dimensions. Scroll down your stylesheet and find where the header elements are. Because we added span tags to the header, we just need to define those tags in the styleseet.
There you have it. To get the image placed exactly where you want it, you’ll have to adjust the margins and/or padding accordingly. This is not the only method for doing this, but this has worked best for me.
If you want to make some changes to the design on your blog, but don’t feel comfortable doing it yourself, contact me! I can make customizations for you at very reasonable rates.
August 1st, 2007 at 2:28 pm
woah Anthony, this new theme is really nice!
I really like the logo and the H2 images in the sidebar, good job on this one, and of course great post, a lot of bloggers want to have a logo instead of the text in the title. Like you said, always make a back-up
August 1st, 2007 at 2:48 pm
Thanks Jon. I liked my last design alot, but I got bored with it quickly……..missed the whitespace. I noticed that nice little custom work you did to the sidebar at FF. Looks really nice…definite improvement!
August 4th, 2007 at 11:04 pm
I think a better way is just to use your image as the header. Probably something like:
<h1><a href="http://antbag.com"><img src="http://antbag.com/wp-content/themes/Easyblue/images/header_2.jpg" alt="Antbag.com" title="Antbag.com" /></a></h1>Your H1 value would still be “seen” by search engines as your IMG’s alt value.
August 5th, 2007 at 1:25 pm
That method will certainly work, but from research I’ve done, it’s not as SEO friendly. I’m no SEO expert, but I think it’s because you would be relying on a search engine being able to pick up the title out of the “alt attribute” rather than the actual title. Ben Henick at A List Apart said:
Here’s another article on A List Apart that touches on the subject.
August 7th, 2007 at 12:13 am
I enjoyed your post a lot. I took a nice header but replaced it with and image and added my own Flash design to it. it really stands out on my WordPress website. Thanks again!
August 10th, 2007 at 10:46 am
Thanks Anthony for this post…I’ve been searching to do this for my blog…I found a few other explanation but yours are the most simple and useful explanation….keep up the good work….
August 10th, 2007 at 11:04 am
Your welcome……I’m glad you found it useful.
August 25th, 2007 at 4:12 pm
Bookmarked….can’t wait for the rest of these tutorials! Thankyou
October 19th, 2007 at 5:02 am
I’d be interested to see you do a tutorial of how you actually created your logo? I really like the sort of tattered style of the text which is a great effect.
So how about it?
October 19th, 2007 at 2:40 pm
Well Mark, the thing is, I’m not really all that great when it comes to graphics. I could do a tutorial, but the secret to my logo is actually the font. I added a couple of effects to it, but the look is primarily from the font I used. It’s called “Bleeding Cowboys”.
October 23rd, 2007 at 10:21 am
Hi Anthony:
I’ve finally got my new logo designed for your template but I can’t seem to get rid of the spacing at the top. My logo should be flush at the top, but it is not happening. The dimensions of my new banner is 900 pix x 122 pix. As well, I’m still text on top of my new logo – how do I get rid of that?
Sharon
October 23rd, 2007 at 12:53 pm
Sharon,
I pulled up your site, and it looks like your header is flush against the top, so I assume you got that fixed like you want it.
As for the text being on top of the logo………that’s what the above post details how to fix.
October 23rd, 2007 at 1:29 pm
I must be doing something wrong since I actually followed the above instructions re: inserting the graphic image. Although, the header elements in Coffee Break are a little different from those used in your example above.
In the Header PhP file I added the span code in this section
“>?php bloginfo(’name’); ?> etc.
Then in the stylesheet file I added my graphic file name (greenliving-banner.jpg) to the section:
/*—-HEADER—-*/
#header{
float: left;
width: 880px;
padding: 50px 0 30px 20 px;
background: url(images/greenliving-banner.jpg) no-repeat left bottom;
color: #fff;
border-top: 3px solid #BFB8A1;
}
After I did the above I viewed the site and the text is still there on top of my new image. Did I span codes or the graphic image name to the wrong sections?
October 23rd, 2007 at 1:50 pm
Sharon,
I’m going to contact you offline.
October 23rd, 2007 at 8:15 pm
Anthony – thank you for your wonderful help. The site development is taking shape very nicely!
Sharon
October 27th, 2007 at 1:40 am
Hoping you will share Sharon’s fix here. In the meantime I’m using my image without the title or description.
Great work!
November 23rd, 2007 at 11:59 pm
hi there Anthony,
I have followed the above tutorial on changing my banner and all but to no avail.
i have managed to get the widths etc but still there is no image placed where there should.
I have done the span part in the header sheet and this is what I have for my title. can you please correct where I am going wrong.
/*******************
——Header——-
*******************/
#header{
float: center;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
background: url (images/lisaharman.jpg)no-repeat;.
border-bottom: 6px solid #5C743D;
color: #5C743D;
clear: both;
}
.title{
margin: 0 auto 0 auto;
width: 900px;
padding: 20px 20px 20px 40px;
text-align: left;
color: #5C743D;
}
.title a:link{
text-decoration: none;
color:#5C743D;
}
.title a:hover{
text-decoration: underline;
color: #5C743D;
}
.title a:visited{
text-decoration: none;
color:#5C743D;
}
Kind Regards
Lisa
November 24th, 2007 at 1:56 am
Hi Lisa,
A couple of things… The code in your header that you put the span tags in is modified in a way that I’m not sure will work. I’m not saying it won’t, but I can’t say that it will. The original code that came in the header of that theme is designed to pull that same information up.
As far as the CSS, the only way to apply any style to the span tags you placed in the header, is to style them in the stylesheet like I’ve done in the example. You’ll notice that one of the elements in my example is
.title h1 spanwhich is there to style just the title, not the entire header.The styles that you’ve applied to the
.title a:linksis not needed as the link will be covered by the logo image.November 27th, 2007 at 11:59 am
Hi i can’t seem to get this to work
i am using the problogger template
this is my header.php
by
/favicon.ico” />
” rel=”stylesheet” type=”text/css” />
/images/logo.png” alt=”logo” />
” />
” />
I am new to php and css, so if you could tell me what to change,
thank you a lot
November 27th, 2007 at 12:03 pm
Srry but my header.php didnt appear in my previous post :
link to file :
my host is 110mb, my username is mtaki
http://mtaki.110mb.com/wp-content/themes/bloggingpro_ttmt/bloggingpro_mt/header.php~
thank you
November 27th, 2007 at 12:21 pm
Anyone who needs me to do this for them, contact me, and I will give you a price. I’m sorry, but I don’t have time to fix everybody’s for free.
November 29th, 2007 at 4:23 pm
Hi Anthony,
No i didn’t want you to do it for me, i tried to post the code of my header and it didn’t work, that is why i added the link.
No problemo… i got it to work
keep up the good posts !
December 5th, 2007 at 1:19 am
Mohammad, I’m sorry. My comment wasn’t directed just at you. I had two other’s emailing me at the same time about how to do this, and I’m getting questions over and over that I covered in the post. I want to be helpful, but every now and then I have to step back. My apologies.
December 8th, 2007 at 2:06 am
The script in your “fastway 10″ template differs from this… what is your advice to a user of a differently coded script?
December 8th, 2007 at 4:18 am
Sarcastic Mom, It’s pretty much the same. The css you see in the illustration would need to be added to the style sheet. There’s a section on the stylesheet in Fastway that is something like…
#header { }
#header a { }
#header a:hover { }
The second two of those elements style the link in the header, which the image will cover up, so those two can be deleted. Then you would add the .title elements to the style sheet…
#header { }
.title { }
.title h1 { }
.title h1 span { }
December 8th, 2007 at 4:15 pm
I appreciate incredibly your time and effort in helping me… looks like I’m going to need to contact you directly and find out how expensive you are as I am still failing miserably.
(Feeling a bit like a moron now.)
December 21st, 2007 at 2:54 am
hi ya nice post really helpful can you please tell me how to add a flash logo to the header
December 21st, 2007 at 3:30 am
Thiru,
I’m afraid that’s something I can’t help you with. I will, however, try to point you in the right direction. Here’s some information that might help you.
January 4th, 2008 at 10:47 pm
I’m trying to build a blog with Coffee Break. Replaced heading with Logo. I’ve followed your directions. Still have the weblog title showing through the image, though I was able to get rid of the tagline (description). Will have to look for a new theme. Unfortunately, I have spent a lot of time on this/
January 5th, 2008 at 3:32 am
Linda,
Don’t give up, yet. It’s probably some small detail you’re overlooking. I sent you an email.
January 8th, 2008 at 5:37 am
I know it’s been asked, and I hate to be a pest, but any chance of getting the details on changing coffee break?
I’ve got it really close, but can’t seem to get the logo to line up, and the box that the title goes in to fit the size of the logo
header.php code:
<a href=”">
style.css code:
/*—-HEADER—-*/
#header{
/* float: left;*/
/* width: 880px;*/
/* width: 900px;*/
/* padding: 50px 0 30px 20px;*/
/* background: url(images/bg_header_900×136.gif) no-repeat left bottom;*/
/* background: url(images/logo.gif) no-repeat left bottom;*/
color: #fff;
border-top: 3px solid #BFB8A1;
}
/*—-ADDED BY JW—–*/
.title{
margin: 0 auto 0 auto;
width: 100%;
padding: 0 0 0 0;
text-align: left;
}
.title h1{
width: 900px;
height: 131px;
position: relative;
}
.title h1 span{
background: url(images/logo.gif) no-repeat left bottom;
position: absolute;
margin-left: -25px;
width: 100%;
height: 100%;
}
Now I’ll be the first to admit you may laugh pretty hard when you see this. Noob at its best
If you wouldn’t mind helping me I would really appreciate it.
January 8th, 2008 at 8:51 am
JDub,
You’ve done a good job. You just need to make a few adjustments.
At the top of the stylesheet, make these changes to the h1 and h4:
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0;
}
h4{
padding: 0;
display: none;
}
This is the code you need for the header / logo:
/*----HEADER----*/
#header{
float: left;
width: 900px;
padding: 0;
background: #fff;
border-top: 3px solid #BFB8A1;
}
/*----ADDED BY JW-----*/
.title{
margin: 0 auto 0 auto;
width: 100%;
padding: 0;
text-align: left;
}
.title h1{
width: 900px;
height: 131px;
position: relative;
}
.title h1 span{
background: url(images/logo.gif) no-repeat left bottom;
position: absolute;
width: 100%;
height: 100%;
}
January 8th, 2008 at 3:41 pm
Woo hoo, Dang that worked like a charm. Thank you so much. I just don’t quite know enough — I’m the dangerous type
And thanks for the great Theme too. I really like your work and style.
Again, thank you.
January 8th, 2008 at 3:43 pm
Oh, and can tell me what font was used in the “customize your theme” logo?
January 8th, 2008 at 4:22 pm
Yes! The font is called “Americana Dreams”. It makes me think of chrome fonts on an old automobile. I thought it would go nicely with the “Customize” aspect. I don’t remember where I downloaded the font from….sorry.
January 8th, 2008 at 4:52 pm
No worries, and yes, I agree, reminded me of an old car too. Very nice font for sure.
Again, thank you for your help, and great blog. I’ve spent way too much time reading.
January 14th, 2008 at 11:14 pm
I could not find a thread that fit this question but I am sure it is relevant to someone besides myself. I am creating a community website with a static front page (there I go again). Problem is when I removed the side bar I also removed the links. Now when someone logs on they are stuck at the log on or front page.
(I hope this is an appropriate question for you discussion area)
January 15th, 2008 at 5:50 am
Mike, I’m not really sure I understand what your question is. I understand that you deleted your links. Can you put the sidebar back?
January 17th, 2008 at 12:16 am
Hi Anthony,
I have followed the directions but my image is not showing up. Please help
Here is my code:
#header{
float: left;
width: 100%;
height: 90px;
margin-top: 20px;
padding: 0;
background: #900;
border-top: 3px solid #555;
border-bottom: 3px solid #555;
color: #FFF;
clear: both;
}.
.title{.
margin: 0 auto 0 auto;.
float: center;.
width: 100%;.
padding:15px 20px 20px 41px;.
text-align:left;.
}.
.
.title h1{.
width: 50px;.
height: 35px;.
position: relative;.
}.
.
.title h1 span{.
background: url(wp-content/logo17.jpg) no-repeat;.
position: absolute;.
margin-left: -1px;.
width: 100%;.
height: 100%;.
}.
And as you can see from my site, the text is gone but there is no logo. What am I doing wrong?
January 17th, 2008 at 12:09 pm
Kim,
I think the problem may be all the extra periods. In the screenshot I used to illustrate the CSS, it’s a screenshot of my stylesheet opened in JEdit. JEdit puts in the periods that are sort of a gray color, and that’s not part of the code. Sorry for the confusion.
April 2nd, 2008 at 5:02 am
Hello Anthony. I don’t know what I’m doing wrong . I can’t get my logo to show up. below is the header and style codes. thanks you in advance.
<img src=”/images/468.gif” alt=”468″ width=”468″ height=”60″ />
here is the style.css
h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, “Times New Roman”, Tahoma;
text-transform: capitalize;
letter-spacing: -1px;
}
#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
}
#header {
float: left;
width: 900px;
padding-top: 6px;
position: relative;
}
#header img {
border-width: 0px;
}
.header-left {
float: left;
width: 390px;
padding-top: 10px;
padding-bottom: 20px;
}
.header-left h1 {
font-size: 25px;
margin: 0px;
padding: 0px;
float: left;
width: 390px;
color: #000000;
line-height: 30px;
}
.header-left h1 a {
color: #000000;
text-decoration: none;
}
.header-left h1 a:hover {
color: #990000;
text-decoration: none;
}
.header-left p {
font-size: 15px;
font-weight: bold;
margin: 0px;
padding: 0px;
float: left;
widt/*
}
.header-left h1 span{
background: url(images/logo_96.jpg) no-repeat;
postition absolute;
margin-left: -1px;
width: 100%;
height: 100%;
Thank you
April 2nd, 2008 at 5:05 am
………continued
and heres is the header
thanks
April 2nd, 2008 at 2:44 pm
Robert,
Gee whiz, buddy, I’m not sure where to start here……..did you read the tutorial and look at the examples?
I think the place to start is to make sure in the header that you have the span tags properly placed as in the example above.
April 11th, 2008 at 2:24 pm
Alternative way to add logo into blog design is replace the existing header with your graphic. Both of them must have the same resolution if you don’t want to edit the stylesheet.
April 11th, 2008 at 4:31 pm
That’s true if all you want to do is change the header image, Zinruss, but we’re talking about making a clickable logo here.
April 28th, 2008 at 1:33 am
Hi,
I just try this but it didnt work for me.
Anthony,
I use your template..:)
Cheers!!
April 28th, 2008 at 6:54 am
@Razis – I looked at your site, and it looks like you got it working.
May 15th, 2008 at 12:05 am
Hi Anthony!
Thanks *so* much for taking the time to post this tutorial. Been searching all over to find a way to do this!
I just have a quick question, if that’s OK. I’m trying to edit Royale theme and there is no H1 section at all in the header.php file (searched and manually went through it). Is that possible? Does that mean that there’s no way to apply your tutorial to that theme?
I’m generally good at following instructions but was rather surprised to not find the H1 section at all and wasn’t sure how to proceed. I understand that you’re busy but any thoughts you could throw out would be awesome!
Thank you again.
Rae
May 16th, 2008 at 5:58 pm
Rae,
I played around with the Royale theme. With all the built in options this theme has, and all the javascript, etc., I’m really not sure without putting some serious time into it. I’m sure it can be done, but I don’t have a quick answer for you. This theme has some complicated code that is above my level of understanding. Sorry I couldn’t help.
May 27th, 2008 at 9:10 pm
[...] read what must surely be a better way to do this in Anthony Baggett’s excellent post; Replace Your Blog Title with a Logo. Although he disclaims himself of being an SEO expert, I do feel that his method is in fact heading [...]
August 12th, 2008 at 12:19 pm
I’ve tweaked using what I’ve read above, but I can’t align the image in the centre. Any tips?
August 12th, 2008 at 12:41 pm
I think I figured it out actually. Thanks, and I love Darkwater. It’s perfect for displaying images- dark without being boring black.
August 12th, 2008 at 2:11 pm
Actually it’s displaying fine in Firefox but in IE it’s aligned to the right and the pointy-finger cursor for a hyperlink isn’t working. Can you suggest a fix?
August 14th, 2008 at 10:53 am
I just can’t seem to get this to work – I’m new to all this WP stuff but still, I should be able to do this!
In my html I have:
Site name
and in the css here’s what I have:
h1 {
width: 236px;
height: 74px;
}
h1 span {
background-image: url(http://www.sitename.com/wp-content/themes/freshy2/images/logo.gif);
position: absolute;
}
The width and height of the area is showing correctly but there’s no image appearing.
Any help would be much appreciated.
August 14th, 2008 at 10:56 am
Arh, the html didn’t show correctly on my previous post:
“http://www.sitename.com”>Site name
You’ll have to trust me that I have the a tag inserted just after the h1 tag and closes just before the end of the h1 tag
August 15th, 2008 at 5:42 am
Aplogies Anthony – you must be getting a bit frustrated with so many questions – I’ll try to figure this out for myself. Thanks again. Alan
August 15th, 2008 at 8:39 pm
Al, I’m emailing you.
October 7th, 2008 at 9:49 pm
Hi!
I want to improve my SQL experience.
I red really many SQL resources and would like to
get more about SQL for my occupation as mysql database manager.
What can you recommend?
Thanks,
Werutz
October 22nd, 2008 at 11:51 am
Hi,
Great post by the way.. Exactly what im looking to do..
However, I am really struggling.. Im new to this, but have added the code to the header
<a href=”">
And, to the Css..
#header {
padding :0px;
background:white;
margin:0px;
height:105px;
}
.title{
margin: 0;
width: 100%;
padding: 0 0 0 0;
text-align: left;
}
.title h1{
width: 370px;
height: 70px;
position: relative;
}
.title h1 span{
background: url(images/logo.gif) no-repeat;
position: absolute;
margin-left: -25px;
width: 100%;
height: 100%;
}
#header h1{
font-size: 40px;
line-height:50px;
letter-spacing:-1px;
margin:0px 0px 0px 17px;
font-weight:normal;
padding:0px;
}
#header h1 a{
border-bottom: none;
color: #469402;
}
#header h1 a:hover{
border-bottom: 1px solid #469402;
color: #469402;
}
.Desc{
color: #D94616;
margin:0px;
font-size:20px;
line-height:31px;
font-weight:normal;
letter-spacing:-1px;
text-align:center
}
img {
border : 0;
}
a, a:visited {
color : #667B04;
text-decoration: underline;
}
a:hover {
text-decoration : none;
color : #667B04;
}
But the text still appears, with no image.
Any suggestions would be greatly appreciated..
Cheers
October 27th, 2008 at 1:35 am
I wanted to thank you – very much for posting the code – I got it to work! I have to play with it some more as far as the padding and margins go but it’s up there. Now I can play with a few other sites I have – see if I can get them to have a logo as well
Thanks again!
Julie