PDA

View Full Version : Wordpress ?: How do I replace a Text header with a graphic header?


Sheakay
September 4th, 2009, 05:46 AM
Hi,
I'm using a free wordpress template, that I've been tweaking, but now I've hit a wall. I have a new header graphic that I want to insert, but I can't seem to find the header code to insert. I've looked in the header.php file and the stylesheet, but I think I'm in over my head. Could someone point me in the right direction?

Thanks!
TraciKnoppe
September 4th, 2009, 08:01 AM
If it's not in the header.php file, then look in the stylesheet.css for coding there for the header area, chances are the background graphic is being called in from there.
lindastacy
September 4th, 2009, 09:22 AM
Is it a "live" blog? If so, what's the URL? Seeing how it's set up might help us help you.
Sheakay
September 4th, 2009, 03:13 PM
Linda - yes - the url is http://www.ITCustomerservice.com I'm trying to put the following graphic in the header
http://www.itcustomerservice.com/images/logo-header-650px.jpg


Traci, I found in the CSS where the background color is being set, but not a background URL. maybe I'm missing something?
retta719
September 4th, 2009, 03:43 PM
This page on the WP site is generally helpful http://codex.wordpress.org/Designing_Headers

You're not seeing a background URL in the CSS section, because there is no background image in the original layout. It's just a block of color, in this case the navy blue color. So you're in the right spot, you just need to add the background url information to it. Does that make sense?
lindastacy
September 5th, 2009, 09:22 AM
The codex is helpful, but sometimes it's hard for me to follow. I often find what I need in the WordPress.org forum. http://wordpress.org/support/

I did a quick Google search and found a site that may be exactly what you need.
http://tamba2.org.uk/wordpress/graphicalcss/ (under the "header" section)

In addition to adding the header image, you need to suppress the text that is currently displayed in your header (title and description).

You may find that the new header image is a little to wide. I think your content box is only 610px wide and new image in 650px.

Once you get started if you have specific questions I'm sure we can help you more.
al smith
September 5th, 2009, 04:22 PM
Hi Sheakay,

I have inserted an image on one of my sites before and I changed it through the header file. It worked for me.

I suppose that it would depend on your theme if you can change it or not.

Look at the bottom of the header.php file for:
---------------------------------------
<body>
<div id="wrap">

<div id="header">
---------------------------------------
(After the above and before the final </div> enter the following code. -- not this sentence or the hyphens. grins.)

<br />

<p>
<a href="http://www.itcustomerservice.com"><img src="http://www.itcustomerservice.com/images/logo-header-650px.jpg" alt="ITCustomerService.com"></a>
</p>

--------------------------------------

Remember to copy and paste your header.php info in a text editor in case you need to change it back.

Like was said above, make sure that your header image is the same width or it won't look right.

Hope it helps.

Al Smith
TraciKnoppe
September 5th, 2009, 04:50 PM
This is how you would add an image as the background for your header; just insert this code below where the header background images is located in the CSS stylesheet:


background: url(images/backgroundimagename.jpg) no-repeat 0 center;

Just change the above to reflect that actual name of your background image and make sure the image is uploaded inside the images folder for the theme you're using; OR with the parenthesis, include the full URL to the background image if you have the image already on the web located outside of the theme's image folder.
kdbbiz
September 5th, 2009, 10:49 PM
Yes, I agree with some of the above mentioned points. That header is too big for your template as is.
Working with graphics to replace text is not always easy. I searched high and low for the easiest template to replace headers. Try installing the theme "Unlimited 1.0" created by WP Theme Land which you can find in the theme directory or on their site. If you have problems finding it or getting it, just PM me and I can send you a zipped file.

It is great because once installed all you do is go to the custom header tab under appearance in your wp tools bar(on left side) and then upload your image from pc. You can crop and everything there.

If you try it out, let me know how it goes.