Copyblogger Header Image Solution

I got it!

Putting An Image in Copyblogger Theme for WP

Putting An Image in Copyblogger Theme for WP

I’ve been searching for a way to put an image in the header of the beautiful Copyblogger theme for WordPress. I could NOT get it. My knowledge of WP is variable–I can edit images in Photoshop. I can edit html and css and understand the WP theme set up for installations on your own server (not the free WordPress hosting solution). I know just enough to do some damage. I can’t explain what I’m doing, especially if it involves PHP, but I can get around in html and css and a little customizing of the WP theme set up, but that’s about it.

If anyone finds this and wants a better explanation, I’ll gladly put a good one together. For now, I did this:

1. create an image file called “Banner.gif” with the image you want to have appear in the header (mine is sized 1492px by 125px and has a black background) and upload it to your default images folder
2. write/edit this line in your “styles.css” file:

#header { height: 9.0em; background: #000 url(‘images/Banner.gif’) 0 100% no-repeat; }

3. Look for “header styles” and edit this line to make sure your logo text is white:

#logo h1, #logo #tagline { display: yes; font: normal 2.0em “American Typewriter”, “Trebuchet MS”, Verdana, sans-serif; color: #fff; }

This isn’t a good step-by-step, but I just needed to know two things, which image to edit and where to tweak the html.

Drop me a line if you want a better explanation and I’ll put together a tutorial with screen shots and stuff.

Comments are closed.