My header is doing my head in!

bryntwr10 · 10-17-2009, 01:43 PM

In wordpress I want to insert an image in the header instead of Words. Could you please advise on how to do this.

My coding at the moment ith text header is.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php if (function_exists('seo_title_tag')) { seo_title_tag(); } else { bloginfo('name'); wp_title();} ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 
    <?php wp_head(); ?>
</head>

<body>

<div id="wrapper">

    <div id="header">
        <h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><span><?php bloginfo('description'); ?></span></h1>
        <ul id="top-nav">
            <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
            <?php wp_list_pages('title_li=&include=2,5'); ?>
        </ul>
        <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
            <input type="text" name="s" id="s" value="Search Keywords" onfocus="document.forms['searchform'].s.value='';" onblur="if (document.forms['searchform'].s.value == '') document.forms['searchform'].s.value='Search Keywords';" />
            <input type="submit" id="searchsubmit" value="Search" />
        </form>
        <ul id="nav">
            <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
            <?php wp_list_pages('title_li=&include=3,4,6'); ?>
        </ul>
    </div><!-- end #header -->

    <div id="container">
        <div id="content">

bryntwr10 · 10-17-2009, 02:01 PM

O my website is blogblizard.com sorry I forgot that bit.

bryntwr10 · 10-17-2009, 06:19 PM

anybody that can help?

coog · 10-17-2009, 10:25 PM

There's a couple way's to do, the easiest way would be to replace that H1 tag with an IMG tag. Something like <img src="path/to/your/img" />

bryntwr10 · 10-18-2009, 05:27 AM

I have done that, the problem is the home bar appears over the image.?

LoraGi · 10-18-2009, 11:02 AM

I just saw your logo which is not displayed properly.
You should delete :

Code:

  <h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><span><?php bloginfo('description'); ?></span></h1>

and 

 <ul id="nav">
            <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
            <?php wp_list_pages('title_li=&include=3,4,6'); ?>
        </ul>

After that edit your css code and add your background image...it should look like this:

Code:

#header{
 background:#EAEAEA url(path to image)no-repeat;
height:137px;
border-bottom:3px solid #EAEAEA;
margin-bottom:28px;
}

You can change #EAEAEA in the background line, if you want another bg-color under your logo.

coog · 10-18-2009, 08:54 PM

I see you got it in there, good job. Just a suggestion, I would change the h1 tag to a div tag (keep the id="logo") and change the height of #header from 137px to 144px to match your image.

That will clean it up...

If you want to keep the H1 tag then set the header height to 164 to compensate for the 20px padding H1 has on top...

10-17-2009, 01:43 PM	#1
bryntwr10 Active Warrior Join Date: Aug 2009 Posts: 61 Thanks: 0 Thanked 1 Time in 1 Post	My header is doing my head in! In wordpress I want to insert an image in the header instead of Words. Could you please advise on how to do this. My coding at the moment ith text header is. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php if (function_exists('seo_title_tag')) { seo_title_tag(); } else { bloginfo('name'); wp_title();} ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><span><?php bloginfo('description'); ?></span></h1> <ul id="top-nav"> <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li> <?php wp_list_pages('title_li=&include=2,5'); ?> </ul> <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> <input type="text" name="s" id="s" value="Search Keywords" onfocus="document.forms['searchform'].s.value='';" onblur="if (document.forms['searchform'].s.value == '') document.forms['searchform'].s.value='Search Keywords';" /> <input type="submit" id="searchsubmit" value="Search" /> </form> <ul id="nav"> <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li> <?php wp_list_pages('title_li=&include=3,4,6'); ?> </ul> </div><!-- end #header --> <div id="container"> <div id="content">
	**Free Debt Information Submit your article to my Directory**

10-17-2009, 02:01 PM	#2
bryntwr10 Active Warrior Join Date: Aug 2009 Posts: 61 Thanks: 0 Thanked 1 Time in 1 Post	Re: My header is doing my head in! O my website is blogblizard.com sorry I forgot that bit.
	**Free Debt Information Submit your article to my Directory**

10-17-2009, 06:19 PM	#3
bryntwr10 Active Warrior Join Date: Aug 2009 Posts: 61 Thanks: 0 Thanked 1 Time in 1 Post	Re: My header is doing my head in! anybody that can help?
	**Free Debt Information Submit your article to my Directory**

10-17-2009, 10:25 PM	#4
coog Active Warrior Join Date: Jan 2009 Location: Northern Colorado Posts: 84 Thanks: 3 Thanked 7 Times in 7 Posts	Re: My header is doing my head in! There's a couple way's to do, the easiest way would be to replace that H1 tag with an IMG tag. Something like <img src="path/to/your/img" />
	Ebook Templates and Authoring Tools

10-18-2009, 05:27 AM	#5
bryntwr10 Active Warrior Join Date: Aug 2009 Posts: 61 Thanks: 0 Thanked 1 Time in 1 Post	Re: My header is doing my head in! I have done that, the problem is the home bar appears over the image.?
	**Free Debt Information Submit your article to my Directory**

10-18-2009, 11:02 AM	#6
LoraGi Warrior Member Join Date: Oct 2009 Posts: 12 Thanks: 0 Thanked 1 Time in 1 Post	Re: My header is doing my head in! I just saw your logo which is not displayed properly. You should delete : Code: <h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><span><?php bloginfo('description'); ?></span></h1> and <ul id="nav"> <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li> <?php wp_list_pages('title_li=&include=3,4,6'); ?> </ul> After that edit your css code and add your background image...it should look like this: Code: #header{ background:#EAEAEA url(path to image)no-repeat; height:137px; border-bottom:3px solid #EAEAEA; margin-bottom:28px; } You can change #EAEAEA in the background line, if you want another bg-color under your logo.

10-18-2009, 08:54 PM	#7
coog Active Warrior Join Date: Jan 2009 Location: Northern Colorado Posts: 84 Thanks: 3 Thanked 7 Times in 7 Posts	Re: My header is doing my head in! I see you got it in there, good job. Just a suggestion, I would change the h1 tag to a div tag (keep the id="logo") and change the height of #header from 137px to 144px to match your image. That will clean it up... If you want to keep the H1 tag then set the header height to 164 to compensate for the 20px padding H1 has on top...
	Ebook Templates and Authoring Tools