Changing the Header Image
Posted by Brandon on October 6, 2008
There are three options for changing the header image…
1. Create a graphic at least 960 pixels wide and 140 pixels high, name it header-bg.jpg and upload it to the /images folder of the theme and it will replace the green background.
2. Upload an image at least 960 x 140 and in the stylesheet (style.css), find the line that begins with #header and you’ll see the line background: url(images/header-bg.jpg);. Change the file name or include an exact url.
3. To make the entire header a clickable graphic… in the file header.php, locate the section marked with
<div id=”header”>
and ending with
</div>
Leave those alone, but delete everything in between them and then insert this code…
<a href=”<?php bloginfo(’url’); ?>” id=”title”><img src=”http://www.yourdomain.com/pathtoyourimage.jpg” alt=”<?php bloginfo(’name’); ?>: <?php bloginfo(’description’); ?>” title=”<?php bloginfo(’name’); ?> Home” /></a>
Make sure your image is exactly 960 x 140.
Is it taller or shorter? Then back in the style.css file, find #header and adjust the height: 140px; to the number of pixels high. I’d highly recommend the 960 wide image though, to save a whole lot of trouble.
Comments
16 Responses to “Changing the Header Image”Leave a comment, and if you'd like your own picture to show up next to your comments, go get a gravatar!
How did you get the search box to match the style of the rest of the widgets? Mine comes up with an ugly looking button and no heading.
Matt, My search box is directly in the sidebar code. So WordPress’ own search box code has a styling all its own. Both perform queries the exact same way, but I styled my own in the sidebar rather than using a widget, so that it would be easily portable.
There’s definitely something wrong on my end then because none of the widgets you have in the sidebar file are showing up except the double width one at the bottom. I’m getting the ads, then the widgets I’ve chosen in the admin page, then the double width text space. Any ideas on what I’ve done wrong?
Hi Brandon, I am trying out your Bible-scholar but I’m having problem changing the font color from green to red. I’d live to use red to match the star on my header. How do I change this? Thanks
To change the font colors in the theme, you’d open up style.css and locate the hex keys. So, scroll down and find h1, h2, a, etc. and next to each of these will be a line that says “color: #393;” or something similar. Change that number to the hex key of the color you want. Here’s a good reference: http://html-color-codes.com/.
Thanks, Brandon!
I am still working on my blog using your template. I’ve tried so many different themes and I find your template easier and nicer. But I do have some problem and I hope you could give me some direcitions. I’d like to know how I can add my Ads on the 3 120×120 space at the top of the sidebars. Since Ads usually are in the form of htmls, how do I add this on those 3 squares? I’d appreciate your help.
Did you check out this post on changing the ads? Most html code is just a link wrapped around an image. These will line up fine. If you have a javascript it may take some extra work to line them up correctly.
Thanks so much Brandon. I am almost there except for the title font on my About and Contact pages. I can’t find where to go to change the color to match my Post titles. Can you please show me where I should go?
Your theme Bible-scholar is really great. I chosed it because it had the 4 plus star rating at Wordpress Theme Library and it’s excellent.
http://stargasbord.vlsites.com
Thanks so much for the compliment! It looks like you’ve changed the color next to “h1 a” but not “h1″. By assigning your light blue to “h1 a” you’re telling the browser to color all headings blue that are links. But you also need to tell it to color all headings blue that are not links. This should also be found near the very bottom of the style.css file.
Hey Brandon,
Loving your theme, real good work. I am working on fixing up someones blog right now, that site is the blog itself. I changed the text color from green to black, but I might have missed something because everything is seeming to be bold now. Could ya help me out..need to unbold it and try to make it more fluid with the rest of the site.
thanks a bunch!
Usman, I’m afraid the only boldness I see is in the last two posts, and for some reason, all the lines in those two posts are in h3 tags. I can’t see any problem with the header, but feel free to point it out to me if I’m missing something.
ah i guess i forgot to mention it, on the sidebars to the right it seems all the text is in bold when i view it, yet when i look on any other page it is back to normal. I went in and replaced all the code from the origianl style.css file but I think that the text format is not in that area. Not sure how it all became bold :/
thanks again
If I were you, I’d open up the post that is in all bold letters and see if you have an unclosed tag. If you have an h3 without the /h3 or a strong without the /strong, then everything after that in your page’s code will be bold. It looks like that’s what is happening, though I can’t find the correct page/post to see it. But I’m 98% sure this is the problem.
I would like to change the color of the hypertext links to blue. Right now they are black and not very obvious. Where do I make this change and how?
Thanks.
Jeanne
PS – I get so many comments about my site!
Thanks for using the theme and I’m glad people like it. You can change hyperlink colors by opening the style.css file and looking through the lines that include the letter a such as a { color: #333; } makes the link color a dark gray, and some of the lines that include “a” colors (link colors) will be div specific such as #sidebar h2 a { color: #???; } and so forth.
You write very well.