The Header
You can change the title in your login screen, under Options. The CSS that controls how those words are displayed;
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}#header a {
color: #fff;
text-decoration: none;
}#header a:hover {
text-decoration: underline;
}
(I have highlighted in bold only that part which affects the appearance of ‘my weblog’ in the top statement.)
Okay … the part in bold tells the font to be over double the normal size, that the font used should be Times New Roman, and the letters should be .2 of an ‘em’ apart.
The #header a says that the letters should be in white, and that even though it is a link, it must not be underlined normally.
The #header a:hover bit tells the code to underline the link when it is hovered.
You can alter what you want in those sections of css I have just described.
Here’s some CSS again:
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
From the top, it means;
- The background is that green / grey colour.
- The border at the bottom should be a double border, 3 pixels wide, and be the colour of #aba
- That the borders on the other three sides should be solid, 1 pixel wide and the colours described.
- The ‘margin‘ line means there is no white space between the header box and the screen sides of your display.
- The ‘padding‘ is the space that is automatically put between the weblog title and the sides of the box.
Want to make the header thinner ? Make the first and the third number smaller. (The numbers for the padding refer to the space that should be inserted on the top, the right, the bottom and the left in that order).
Want to make the header bigger ? Increase the first and third numbers.
So you can change the font you want, you can alter it’s colour, and you can make the background a different colour too. Wonderful ! But you might want an image …….. so here’s how to do it.
3: Putting an image into the header box.
Before I start, one or two points:
- Although you may have a fast line, not all your viewers will. Try to keep image sizes to around 50K or less - it will save you bandwidth too.
- If you have changed the image, but it is not showing up, it could be an issue with your browser cache. Clear the cache and / or - on a Windows machine - press CTRL-F5. This will force a hard refresh. If this does not work, then check your image upload again.
Okay, image time. Here’s that code again;
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
The background has been set with a colour, but if we add an image statement after it, this will take over.
You can leave the ‘background: #90a090;‘ line in, comment it out, or delete it, or change the colour to that of your page. Your choice.
Just under that line you need to add this line;
background-image: url(”);
and in between the ” goes the address of the image you are going to use.
Unless you tell the CSS otherwise, it will repeat your image if there is any extra space in the header.
If you are using an image that is smaller, you can add the following to the CSS to alter how it repeats: background-repeat: no-repeat; Image is displayed only once.
background-repeat: repeat-x; Image repeats horizontally.
background-repeat: repeat-y; Image repeats vertically.
background-repeat: repeat; Image repeats constantly. Good for tiled images.
Looks straightforward eh ? Hmmm … not quite 
The default header box is what ? around 50px tall ? If you load an image that is 1000px tall, all you will see is the top 50px of it (though why you would want a header picture that big is beyond me, but you see what I mean). The image properties matter not if the image is too big - the box will win the contest. So you have to alter the box - not the image.
Let’s say you have an image that is the perfect width, but is slightly too tall. This is how we alter the box. Look at that ‘padding: 15px 10px 15px 60px;‘ line - this is where we change things.
(I’m assuming you have chosen an image and can see part of it on your weblog).
Now we are going to alter the first and third numbers.
Altering the first will make the box bigger, but will push your weblog title down.
Altering the third will again make the box bigger, but your title will stay where it is.
For now, increase the third number until the whole image appears in the box. If you are happy with how it looks, cool ! You’re done
If you want the title to be at the bottom though, swap the first and third numbers around.
If you want it in the middle, adjust those numbers to be the same.
You may now want to either change the border colours to suit the image or your page, or lose the borders - just delete those lines in the latter case.
With the example below, here is the CSS used to display it.
#header {
background: #fff;
background-image: url(’fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 150px 60px;
}
One last thing …. the header box actually fits the whole screen width in a default install. And you may have an image that wide - and of course you want to see all of it. In this case, you need to bump the menu down.
Here’s the menu CSS;
#menu {
background: #fff;
border-left: 1px dotted #ccc;
border-top: solid 3px #e0e6e0;
padding: 20px 0 10px 30px;
position: absolute;
right: 2px;
top: 0;
width: 11em;
}
See the line ‘top: 0;‘ ?
Make the 0 into 100px, see where it goes, and then adjust it to suit.
That’s how to add an image to your header.
It does get a bit more complicated - but not that much - when you want to use an image that is smaller. If this is what you want, please head over to the WP Styles page and check out the other effects than can be achieved. Study the same part of their CSS as detailed above, and you should, knowing what you do now, be able to see how they did it.
If you have taken the time to create a new image for your weblog, you might not want the title to be written all over it.
It’s easy enough to alter ‘index.php’ so that <?php bloginfo(’name’); ?> is not in the header id, but that removes an important part of your site’s navigation. If someone were to view a single post, or a category list of posts, they would have no easy way to return to your main page. So what is needed is for a way for your header image to act as the hyperlink, even without your weblog title there.
The ‘#header’ and ‘#header a’ CSS needs replacing for this to happen.
First, find the measurements of your header image in pixels.
Then, in the CSS, find where #header is defined. It may look something like this if you already have an image there:
#header {
background: #fff;
background-image: url(’fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 150px 60px;
}
Delete lines until you are left with this:
#header {
background-image: url(’fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
margin: 0;
}
Now add the dimensions of your background image:
#header {
background-image: url(’fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
margin: 0;
height: 200px;
width: 718px;
}
That now controls the image, but it doesn’t yet take the text away. To do this, find where ‘#header a’ is defined. In a default CSS, it looks like this:
#header a {
color: #fff;
text-decoration: none;
}
Delete that. In it’s place, put this code:
#header a {
display:block;
height:100%;
text-indent:-500em;
text-decoration:none;
}
Your text is actually still being displayed, but as it’s a couple of feet to the left of your monitor, you can’t see it. But, even though it is there, the code above causes the whole area to act as a hyperlink.
So you now have an image that is a link, but without any writing on it, and without having to edit the index file.
