Adding a Header on a Simple Wordpress Template

**NdeJonge** · 05-10-2010 01:41 PM

Hey Guys,
What I'm trying to do is hopefully very easy and I'm just not looking in the right spots.

I'm trying to add a header to this website Bet on Belmont Stakes | 2010 Belmont Stakes Betting.

I want the header to cover both the content area and the navigation bar.

I've never added a full width header on this theme before and I'm not sure if it's possible or easy to do.

If anyone can help that would be awesome.

The header I want to add is 1000px wide so it would cover the entire page and I just want it on top of what is there now and the rest of the page to be pushed down.

**Elsidney** · 05-10-2010 03:30 PM

It should fit in easily enough. Find <div id=wrapper> in the code and put the img src tag right after that.

**PokerFelts** · 05-10-2010 05:11 PM

Find:

<body>
<div id="wrapper">

Add in: <img src="http://www.YOURIMAGELINK" width='1000'>

<table id="main">

<tr>

<td class="leftmenu"></td>

That should sort it for you, if not gimme a shout.

**Elsidney** · 05-10-2010 05:25 PM

Or, you could add your image directly before the <div id=wrapper"> and use the existing css classes to make it line up nice (at least in ff). So put in the img src tag and use class="logo aligncenter".

**NdeJonge** · 05-10-2010 05:28 PM

Thanks guys...
That worked, but now the header is a little off center and not connecting with the body. Check it out here: Bet on Belmont Stakes | 2010 Belmont Stakes Betting.

Any ideas how to fix that?

**Elsidney** · 05-10-2010 05:30 PM

I'd say move the img tag to before the div=wrapper and add the class="logo aligncenter" to it. So it's <img class="logo aligncenter" src="...

**NdeJonge** · 05-10-2010 05:34 PM

That worked for aligning it Elsidney, thanks a lot! Now just wondering hot to get the small space between the header and the body out.

**Elsidney** · 05-10-2010 05:37 PM

Ok, np. You can edit the css file for that. Find the #wrapper near the top of the file and add border-top:0px solid #61380B; right after border: 5px solid #61380B;

Or you can just change the existing

border: 5px solid #61380B;

to

border: 0 5px solid #61380B;

**NdeJonge** · 05-10-2010 05:43 PM

Worked like a charm

.

Thanks a lot Elsidney.....I've been wondering how to do this for a while!

**Elsidney** · 05-10-2010 05:52 PM

You're very welcome. It seems good in ff and IE8, not so sure about IE7. That a problem for you?

If it is a problem change
border: 0 5px solid #61380B;

to
border: 5px solid #61380B; border-top:0px;

Thread: Adding a Header on a Simple Wordpress Template

LinkBack

Thread Tools

Display

Adding a Header on a Simple Wordpress Template

Thread Information

Users Browsing this Thread

Similar Threads

Adding Translated Pages To WordPress

Need custom header and simple clean site designed

Adding language on Wordpress

Adding Google Analaytics To Wordpress Blog

Adding an Icon to the address bar in Wordpress

Bookmarks

Bookmarks

Posting Permissions