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.
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
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!
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.
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.
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!
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….
Your welcome……I’m glad you found it useful.
Bookmarked….can’t wait for the rest of these tutorials! Thankyou
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?
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”.
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
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.
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?
Sharon,
I’m going to contact you offline.
Anthony – thank you for your wonderful help. The site development is taking shape very nicely!
Sharon
Hoping you will share Sharon’s fix here. In the meantime I’m using my image without the title or description.
Great work!
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
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.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
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
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.
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 !
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.
The script in your “fastway 10″ template differs from this… what is your advice to a user of a differently coded script?
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 { }
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.)
hi ya nice post really helpful can you please tell me how to add a flash logo to the header
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.
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/
Linda,
Don’t give up, yet. It’s probably some small detail you’re overlooking. I sent you an email.
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_900x136.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.
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%;
}
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.
Oh, and can tell me what font was used in the “customize your theme” logo?
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.
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.
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)
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?
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?
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.
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
………continued
and heres is the header
thanks
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.
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.
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.
Hi,
I just try this but it didnt work for me.
Anthony,
I use your template..:)
Cheers!!
@Razis – I looked at your site, and it looks like you got it working.
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
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.
[...] 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 [...]
I’ve tweaked using what I’ve read above, but I can’t align the image in the centre. Any tips?
I think I figured it out actually. Thanks, and I love Darkwater. It’s perfect for displaying images- dark without being boring black.
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?
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.
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
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
Al, I’m emailing you.
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
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
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
Hello, I tried following your directions but it seems the “shine” theme that’s available on wordpress doesn’t have the same files. How would I modify the “shine” theme to put my logo on the title?
Why can’t I change the background color in the header? I can only change the text color. I could change the background in K1, but not K2.
I found how I can change the header’s background color, but it would have been nice to have that in a control panel.
I didn’t design K2, and am not familiar with how it’s coded.
Hell Anthony,
Thank you very much for this post. I’ve been searching for an optimal solution for this issue for days now. I almost gave up hope.
Your solution is the perfect SEO – Bitmap Logo combination.
Once again, thank you and my best wishes.
You’re very welcome.
Hi i was wondering if you can help. I am trying to replace a logo png file with an swf file in my wordpress theme which is made by studiopress. the site is
you can see the flash logo which i want to add on this into page
http://www.jazzmakeupartist.com
The wordpress section of the site can be seen on the below site
http://www.jazzmakeupartist.com/makeup
any ideas how this can be done. if so can you please help me with the html code needed for me to copy and paste in
Nice work Ant – worked perfectly for our wordpress website:
Organic mountain retreat
Great tutorial man; I travelled the whole internet to search for this & at lat I found this blog post;
thanks again; bookmarked this post.
Hi Anthony,
This is just the tute I’ve been looking for, unfortunately I’m completely lost with the theme I’m trying to adapt to get this to work.
[Huge Block of Code]
I know it’s asking a lot but any advice as to where I should be putting the title code in (I’ve tried a number of different places without success) would be greatly appreciated.
I’m adapting the WP ‘Director Theme’ if that helps
Cheers,
J.
Please ignore my previous post. I worked it out. I can’t help but wonder what’s wrong with simply setting the header text to ‘transparent’ in color. If it’s still there then a search engine should still able to pick it up, right?
Thanks again for all your work!