Replace header with logo

are you capable of editing files?
If so, find the theme folder sliding door and open the “header.php” file

Edit where it says

<!-- BEGIN wrapper --> 

<div id="welcomeheading">
        <h1><a href="http://www.heleloa.com/"> 

        Heleloa        </a></h1>
</div><!-- END welcomeheading --> 

<div class="description">The #1 online directory for Hawaiian businesses in Southern California</div>

and replace it with something like:

<!-- BEGIN wrapper --> 

<div id="welcomeheading">
<h1><a href="http://www.heleloa.com/"><img src="IMAGEFILEHERE"></a></h1>
</div><!-- END welcomeheading --> 

<div class="description">The #1 online directory for Hawaiian businesses in Southern California</div>

Replace where it says “IMAGEFILEHERE” with the location of the file. If it is in your themes image folder it will be something like
images/IMAGENAME.jpg

alternativly, if you don’t want the tagline to be text, but a part of the image, delete the
<div class="description">The #1 online directory for Hawaiian businesses in Southern California</div>
from the header

The width of the header is limited by your wrapper. which right now is set at 940px. You have two options. Either make the wrappers width larger, which will cause your entire page to widen (which I don’t think you want)

or you can move the header:

<div id="welcomeheading">
        <h1> 

        <img src="http://i.imgur.com/h1jW9.png">
        </h1>
</div>

to be above the wrapper and change the style of the “welcomeheading” element.

here is my line by line code recommendation:

find this in header.php:

<div id="wrapper"> 

<!-- BEGIN wrapper --> 

<div id="welcomeheading">
        <h1> 

        <img src="http://i.imgur.com/h1jW9.png">
        </h1>
</div><!-- END welcomeheading -->

replace it with this

<div id="welcomeheading">
<img src="http://i.imgur.com/h1jW9.png">
</div><!-- END welcomeheading -->
<!-- BEGIN wrapper -->
<div id="wrapper">

If you do this you will also have to edit a few lines in your style.css file to properly align your header.

on line 52 of style.css you will see this:

#welcomeheading {
        text-align: center;
}

replace it with something like this:

#welcomeheading {
        width:XXXpx;
        margin: 0 auto;
}

enter the width of the image in the XXX field.
declaring “margin: 0 auto” tells the header that it needs to be centered on the page now that it is not in a wrapper.

hope that helps.