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.
Related posts:
- Clickable Header Image For The Neoclassical Theme The Neoclassical Theme comes with a revolutionary rotating header image. You can actually use as many header images as you like and they will rotate on each refresh. It’s a cool feature, but when it comes to branding your blog, this rotating images makes it quite difficult for visitors distinguish...
- Align Image In Post WordPress 2.7 More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only...
- Making A Header Image For The StudioPress Theme Finally had some time and the mood to do some WordPress Theme modding again. As promised earlier, I put the StudioPress Theme to task again, this time using the codes given to me by Darran of LimeTouch. Read more on Making A Header Image For The StudioPress Theme… ...
- How To Add A Second Header To Your WordPress Theme Just added a second header to my Theme. When I created this Theme, there was no plans at all of wanting a second header as I don’t have anything that’s worth occupying that prime piece of blog estate, but since I am on a subscriber increment campaign, I thought...
- How To Add A Banner In Your WordPress Header Banner Ads is one of the most popular format for advertisers and publishers alike. That’s because banner ads often occupies the best piece of a blog’s real estate, that is the blog header or on the top of the contents. These areas are the most visible to anyone visiting...
{ 4 comments }
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.
Comments on this entry are closed.