Ever since I launched Basic2Col in March 2006, people have asked me how to replace the headertext with a banner, - and still make it link to home.
The latest version of the theme (3.0.x) let you do exactly that, and what you need to do is:
- Upload the image you want to use to /wp-content/themes/basic2col/gfx
- Open style.css and find
/*header*/ - Save and upload to /wp-content/themes/basic2col
- That’s it!
Replace all the #header codes with:
#header {
margin:0;
padding:0;
background: url('./gfx/yourheader.jpg') top left no-repeat;
}
#header a {
z-index:1;
display:block;
height:150px; /*the height of your image*/
margin:0;
padding:0;
text-decoration: none;
}
#header span {
position:relative;
overflow:hidden;
z-index:-100;
}
#header p{
display:none;
}
Notes
If it look strange, make sure the height in #header a { is exactly the same as the height of your image.
If you’re not that happy with editing the source files for Basic2Col, you may consider to create a custom child theme for the theme.
This tutorial was previous published on my old site “WP Stuff” in March, 2008
All Posts
I appreciate this info. I’ve been trying to figure this out for some time now. Unfortunately, it isn’t working for me. It seems to set aside space for the graphic, but only leaves white space there.
I love the theme.
July 11, 2008 @ 3:32 pm
Gene: Have you checked that the file names and paths are correct?
July 11, 2008 @ 3:36 pm
I have checked, though maybe I still have it wrong.
I replaced the word ‘yourheader’ with the name of my file. I put the file in my basic2col-11 directory and another copy in a new directory I labeled gfx under that. If I understand this correctly, I should be able to use either of the following lines:
background: url(’./gfx/yourheader.jpg’) top left no-repeat;
or
background: url(’./yourheader.jpg’) top left no-repeat;
Neither works.
July 12, 2008 @ 12:04 am
Gene: The problem is that you use and older version of the theme, this hack needs the title to be wrapped in span tags, which is only built in in version 3.0+
So you need to open header.php and add
<span>right after<h1>and</span>right before</h1>to make it work for you.July 12, 2008 @ 9:37 am
Kristen,
Thank you for the article on how to use an image in the header. I am trying to use a logo image at the top left on the header. I am implementing using a custom child theme to your latest basic2col theme. I am having trouble with the image, which is not a background, and the blog name placement. Is there a more appropriate way to display the image? Where is the position of the blog name specified?
Don
September 17, 2008 @ 8:16 pm
Don: it is probably best to add the images as background, and tell it to be to the top left:
background-position: top left;And then simply play with padding or height of #header to show it.
September 21, 2008 @ 12:32 pm