I said before that I don’t like to mess with header images for WordPress Themes that does not comes with any header images. Themes like this one that I am using does not have provisions for header images and when you are not good in CSS codes like me, trying to insert a header image into a theme like this can be very frustrating.
Blue Workhorse asked me if it is possible to insert a header image for themes that does not comes with one. Of course you can but most of the time it will not look right because the theme designer has not included any division codes for that purpose. I checked out Blue Workhorse and he is using the StudioPress Theme. I happen to have a copy of that theme in my xammp so I gave it a shot.
Taking that theme as an example, if you want to insert a header image, first make your image to the right width. In this case the width of the theme’s body is 950 px so I made an image for that same width with a height of 100 px. Then upload the image using your FTP client to your Theme’s image folder. Remember the title of that image. In my case, I titled the image “header.jpg”
Open the theme’s stylesheet and scroll down until you see this code.
#header {
margin: 0;
padding: 0 0 0 0;
}
Immediately before the “margin: 0;” insert the extra codes like below. (the ones in bold)
#header {
background: url(images/header.jpg);
width:950px;
height: 100px;
margin: 0;
padding: 0 0 0 0;
}
You must specify the width or else the image will not show. You can play with the height though. So if you want a bigger image, increase the height. Say if your image has a height of 200 px, change the codes here accordingly. The width has to be the same as your theme’s body width. The screenshot below shows the image I have uploaded.
Now comes the frustrating part. I cannot find a way to make the image go below the blue color column on the top where the search box is located. I tried to adjust the padding values but to no avail. I am sure there is some way to do it, but I really do not know, so I am sorry. In the end, I did a workaround by adding a blue column exactly the same size as the one in the theme so when the image loads it blends in perfectly with the original and no one will notice anything different.
That done, I am sure you will also want to hide the theme’s title. That is the easy part. Scroll down until you see this code below and ad in “display: none” (bolded)
#underheader h1.sitename {
display:none;
padding: 0 0 0 0;
position: relative;
font-size: 23pt;
width: 600px;
}
If you want to hide the site description, do the same thing for these codes.
#underheader h2.sitedesc {
display: none;
padding: 0 0 0 0;
position: relative;
font-size: 12pt;
color: #4C82A6;
}
Detailed information about WordPress Themes Header Image can be found at the WordPress codex.
Using the #header div is the most semantic way of building the blocks of a custom header. Setting a margin for your div should do the trick like:
margin: [blue column's height] 0;
Of course I need to take a look at the theme’s structure to give a proper solution. That is the reason why I said before modifying a theme requires you to understand what the theme’s code. Another method you want to take is to set the header’s position to absolute and manually use pixels to shift it but I wouldn’t recommend it though.
Probably I will go look through it when I am home, at the office now. Perhaps then, I can give you a more accurate solution.
Darran
Thanks! Much Obliged.
I have got it working.
In your header.php
insert
your div just under the div #underheader
Your CSS properties should be as follows:
background: url([your image]) left top no-repeat;
float: left;
width: [your width]px;
height: [your height]px;
margin-bottom: [space from menubar]px;
Do note that your width can’t exceed the space left after having the RSS badge. Should you wish to put a huge header, you have to remove the div #toprss code.
I hope that helped your readers
darran
Wow! Thanks Darran, that was very kind and generous of you. I’ll give it a shot and see if I got your instructions right and then update my post.