NOTE: you may use the image linked in the sample CSS below. it was released under the GPL as part of the Disconnected theme. Please DO NOT use my header image.
So you bought the Custom CSS upgrade. but you've already got a header image that you like, so you don't want to change themes to sandbox, since sandbox doesn't have a custom header. good news! you can still have a clickable header. here's the trick:
h1 a {
display:block;
text-align:left;
background: url(http://sunburntkamel.wordpress.com/files/2006/04/regulusbg.jpg) top center no-repeat;
height:147px;
width:660px;
border:1px solid #FFFFFF;
text-indent: -9000px;
}
what it does:
h1 a - h1 is the highest level header. it's used for the title of your page (blog, whatever). it's only allowed to occur once. 'a' is the link. (when you see elements listed like that, with spaces inbetween, later elements occur inside the first element).
display:block; - links, by default, are inline elements (they don't force a new paragraph). we need this element to have height and width properties, so we'll need it to force elements to stack under it (block), rather than wrapping around it (inline)
background: url() - this is the picture we're going to use. since it's going to act as a link, you'll want it to have the name of your blog (in some fancy font), or something that signifies that it should be clicked (also known as affordance).
height:147px; width:660px; - this is the height and width of the image. this is going to determine how big our clickable area is as well, so if you center the image, but you want the entire top of the page to be clickable, you might want to use width:100%; instead.
text-indent: -9000px; - this is where we get tricky. if we leave out this line, you'll have a clickable header, but it will have the text of the link on top of it. that defeats the point, most of the time. so we're going to push the text off the page. 9000 pixels to the left, out of sight, out of mind.
and we're done!. you'll still get all the search engine benefits of semantic markup on the title, but you can make your header look as pretty as you want it to.
[digg=http://digg.com/design/HOWTO_Make_a_Custom_Header_Link_in_CSS/]
Bookmark This:
:: 
:: 
:: 
:: 
32 Comments
OMG I think I might even understand sort of and for a non-coding computer dummy that’s a huge accomplishment. So I’ll be bookmarking this page for that day when the cyber light shines and I can actually consider construct (breaking/destroyingre-building) a theme. P.S. Perhpas you should make a post in the wordpress css customization forum with a link back to this useful information.:D
@ TT – thanks!
there’s sort of a general etiquette that posting a link to your own article is spam-ish.
getting the official blog to link you seems ok to me, though
very helpful post but you need to increase the font size a little.. very hard to read.
Sorry about using your header, coz it’s simply convenient to copy & paste both up & down. Pls continue to share your ideas. Thanks. ^^
well, thanks for fixing it
i’m glad to see you’re learning by doing (it’s the same way i learned). i can’t wait to see your blog finished.
I’m almost new to html language, now reading page by page at w3schools.com. I guess it may take weeks for a satisfactory design. Anyway, it’s really funny to customize my own page.
Thanx a lot. this technique is what i was looking for since 2 days
Thanks for this! I was having a hard time figuring out how somebody else did it. Nice and clear. merci beaucoup.
I dig this, but I can’t seem to get it to center the image itself in the header in a sandbox theme.
Site: http://twohatchicks.com/new/
hmm…
i’m not sure why your layout is being so difficult. the only way i could get it to work on yours was by using
#blog-title a { width: 100%; }. i don’t know what you’ve got planned, but if that works for you, i’d say use it, even if it’s an ugly hack.Thanks, that works fine. Weird.
Thanks for posting this information! I’m sure reading will answer my question, but I am curious how you were able to make the style sheets both in front of and behind your header image! That’s just amazing. If you have any direct information, please feel free to email me. Thanks =)
(for non site owner, just post here)
do you mean the way the logo images changes when you hover on it, or the transparent appearance of the header itself?
you can see the images that make up the header here, it’s basically flat images that look transparent but aren’t. i didn’t design this theme, btw, check out the links at the bottom of the page.
the changing logo is accomplished by simply adding
h1 a:hover { background-position: -200px 0 }that way the whole 400px wide image loads right away, and just gets moved over to where the highlighted portion of the image is.
Thanks for the quick reply! Just after I posted this (Thats always how it goes) I found the link to the theme, and downloaded the .zip file, and upon extracting it, I noticed that in fact they were, as you said, simply flat images that matched the background image.
It’s just a very neat theme, but yes, my specific question was how were you able to make parts of your CSS transparent while other parts were not transparent.. but as I can see, and as you pointed out, it’s simply flat images. I was unable to right-click on them and view image, so thats what had me confused.
In any case, thanks again for the quick response! I’m obviously a little old-school in my HTML, and am in desperate need of improvement =)
Great site!
Heh, next time I’ll just view Page Info, and go to Media.
=) Cheers.
you can achieve a similar effect with transparent PNG’s, although you can’t make things blurry. unfortunately, they don’t work in IE 6. you can check out vistered little for an example of that.
That’s a great turial, although I’m just wonding about the -9000 thing. If I use this method to create a header, will I be penalized by Google and other search engines because the header is off the page. Will it be seen as an atemt to spam by the robots they utilize??
Any help would be great…
AFAIK, no, you won’t be penalized. using
display: none;penalizes you, buttext-indentshould be ok.i doubt that would change, since a long string of text would start to appear. this only works for short link texts.
Cheers Adam, I’ll go and design my header now…
Adam,
I’m trying to adapt your code, and it’s working great in Internet Explorer, but the banner image is not displaying for me in Mozilla Firefox 1.5 for the PC.
Here’s the coding snippet from my custom stylesheet:
h1 a {
display:block;
background:#2F757F url(‘http://jabbott.files.wordpress.com/2007/04/chick_bnr_orange_blue1.jpg’) top center no-repeat;
height:200px;
width:760px;
border:0;
text-indent:-9000px;
margin:0;
padding:0;
}
Linking directly to the URL in Firefox displays fine, so I know it’s not the image or the URL. Any suggestions would be most appreciated!
if you uploaded the image via the custom header page, it won’t work. it’s a bug in wordpress.com. you can rename the image, and upload in the Write > Post page of your dashboard. the new image should work just fine.
Thanks for your reply and suggestion. I removed all the banner graphics previously uploaded, then used the Write > Post page to upload again. However, I didn’t try renaming…will try that now. Here’s my question: if the post is a draft (not published), will that matter? If so, how do I publish without the post being seen in the blog.
Answered my own question — the graphic is working now. It turned out there was a flaw in the graphics file itself. Once re-opened in Photoshop and resaved, the error disappeared and the banner is now displaying in Mozilla. This one was weird, because I could display the image by itself in the browser, but the truncation or error in the graphic file only caused a problem once the file was inserted in a page in Mozilla. I’ve never seen that before! When in doubt, go back to square one. Thanks again for your coding suggestion!
What is the align:center; for? I haven’t seen “align” in the CSS specs
good call, Jon. changed to text-align. not sure what i was smoking.
Adam,
I don’t see the point in having that either. If you are “hiding” the text (by spacing it off the screen) you shouldn’t see any alignment, right?
– Jon
it depends what base you’re starting from. most wordpress themes’ headers are centered by default. you can
text-indentall you want, if it’s centered or right aligned, it’ll still be visible.Thenk you for your CSS help in the forum. I’ve actually been able to make more changes without any forum lifeline; one day, n the middle of the night, the style sheet just made sense all of a sudden. I can’t believe your site began as sandobx…it’s gorgeous! Thanks again. I very much appreciate your help.
isn’t that a great feeling?
i’m glad i could help.
there’s actually not that much about the HTML structure of my blog that’s changed, it’s mostly little doodads and features. the sandbox is very versatile
Thanks for this, Adam. The -9000 indent was exactly what i needed!
thanks for this, i’ve used the trick, but i’m encountering a lot of white space above the header iamge, it looks pretty bad and not in sync with the rest of my site.
any ideas?
I recently got a nastygram from google on a site using this technique, so I’m working on sorting out whether they’ve changed their rules about this.
For any site that you have control of the HTML for, it’s better to put your logo in an
<img />tag inside the<h1><a>tags, and put your title as thealt=""attribute.3 Trackbacks/Pingbacks
17 Aug 2006 at 4:53 am
WordPress.com » Try Custom CSS
[...] Also surfacing around WordPress.com is information about CSS and the Sandbox theme. Lorelle provides a comprehensive starter stylesheet for Sandbox. Sunburntkamel tells us how to set up a clickable custom header image. I started a forum thread on CSS Asides for Sandbox. Keep your eye on the CSS Customization Forum for more tips and snippets. [...]
30 Jun 2007 at 9:39 pm
How To Turn Your Header Into A Link » WPDesigner
[...] Follow Adam’s tutorial on custom header css. [...]
26 Jul 2007 at 11:09 pm
Headsetoptions.org » Sandbox (CSS) Design Competition Pre-Submission Checklist
[...] me know if it’s useful and/of if I missed something. Also, check out a few more resources (Sunburntkamel and Small Potato). All the best. Design, Web Design, blog, meta tags, site validation, Code, [...]
Post a Comment