changing header from image to html

[keylesslocks]

I need to change our header from here:
midwestapplianecparts.com

which now is just an image:

http://midwestapplianceparts.com/inc.../header_bg.jpg

to something that looks like this:


I am going to have to splice up the new header and add html, then put into template... once I get the html code, what file would I go into and add it to replace the current header?

thanks so much for your help!

~ Eric

[gjh42]

/includes/templates/your_template/common/tpl_header.php.

[keylesslocks]

thanks, having a slight problem.

when I replace this code:

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>

with this:

 <div id="logo">
    
    <!-- ImageReady Slices (NEW-HEADER!!!-with-little-i.jpg) -->
<table id="Table_01" width="750" height="219" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2">
            <map name="FPMap0">
            <area href="http://midwestapplianceparts.com/" shape="rect" coords="1, 5, 348, 80">
            </map>
            <img src="http://midwestapplianceparts.com/images/appliance-parts_01.jpg" width="375" height="93" alt="" border="0" usemap="#FPMap0"></td>
        <td colspan="2">
            <map name="FPMap1">
            <area href="http://midwestapplianceparts.com/" shape="rect" coords="26, 0, 67, 20">
            <area coords="78, 0, 174, 22" shape="rect" href="http://midwestapplianceparts.com/pages/about-midwest-appliance-parts-pv-c0-2.html">
            <area href="https://midwestapplianceparts.com/account/login.html" shape="rect" coords="183, 1, 257, 19">
            <area href="http://midwestapplianceparts.com/shopping-cart/" shape="rect" coords="268, 1, 373, 21">
            </map>
            <img src="http://midwestapplianceparts.com/images/appliance-parts_02.jpg" width="375" height="27" alt="" border="0" usemap="#FPMap1"></td>
    </tr>
    <tr>
        <td>
            <img src="http://midwestapplianceparts.com/images/appliance-parts_03.jpg" width="158" height="66" alt=""></td>
        <td>
            <table>
                <tr>
                    <td><!-- START SCANALERT CODE -->
<a target="_blank" href="https://www.mcafeesecure.com/RatingVerify?ref=www.midwestapplianceparts.com">
                    <img width="94" height="54" border="0" src="file://images.scanalert.com/meter/www.midwestapplianceparts.com/13.gif" alt="McAfee Secure sites help keep you safe from identity theft, credit card fraud, spyware, spam, viruses and online scams" oncontextmenu="alert('Copying Prohibited by Law - McAfee Secure is a Trademark of McAfee, Inc.'); return false;"></a>
<!-- END SCANALERT CODE --></td>
                    <td><!-- Powered by: Crafty Syntax Live Help http://www.craftysyntax.com/ -->
<script type="text/javascript" src="/livehelp/livehelp_js.php?relative=Y&amp;department=1&amp;pingtimes=15"></script>
<!-- copyright 2003 - 2006 by Eric Gerdes --></td>
                </tr>
            </table>
            </td>
    </tr>
    <tr>
        <td colspan="3">
            <map name="FPMap2">
            <area href="http://midwestapplianceparts.com/dishwasher-parts-2/" shape="rect" coords="7, 2, 79, 31">
            <area href="http://midwestapplianceparts.com/dryer-parts-43/" shape="rect" coords="81, 3, 117, 31">
            <area href="http://midwestapplianceparts.com/fryer-parts-870/" shape="rect" coords="118, 2, 153, 31">
            <area href="http://midwestapplianceparts.com/hot-water-heaters-955/" shape="rect" coords="155, 2, 236, 31">
            <area href="http://midwestapplianceparts.com/humidifier-parts-914/" shape="rect" coords="237, 1, 299, 30">
            <area href="http://midwestapplianceparts.com/hvac-parts-122/" shape="rect" coords="299, 2, 339, 30">
            <area href="http://midwestapplianceparts.com/microwave-parts-537/" shape="rect" coords="341, 0, 407, 31">
            <area href="http://midwestapplianceparts.com/refrigerator-freezer-65/" shape="rect" coords="407, 2, 479, 30">
            <area href="http://midwestapplianceparts.com/stove-oven-range-58/" shape="rect" coords="480, 3, 558, 31">
            <area href="http://midwestapplianceparts.com/washing-machine-39/" shape="rect" coords="559, 3, 666, 32">
            <area href="http://midwestapplianceparts.com/water-filters-1/" shape="rect" coords="665, 3, 743, 33">
            <area target="_blank" coords="285, 34, 389, 60" shape="rect" href="http://usps.com">
            <area target="_blank" href="http://ups.com" shape="rect" coords="391, 34, 421, 60">
            <area target="_blank" coords="492, 32, 559, 59" shape="rect" href="https://www.paypal.com/us/mrb/pal=5BEE7ZG9XH23W">
            <area href="https://midwestapplianceparts.com/account/login.html" shape="rect" coords="566, 37, 741, 58">
            <area href="http://midwestapplianceparts.com/pages/part-not-listed-pv-c0-1.html" shape="rect" coords="6, 63, 742, 121">
            </map>
            <img src="http://midwestapplianceparts.com/images/appliance-parts_05.jpg" width="750" height="126" usemap="#FPMap2" border="0"></td>
    </tr>
</table> 

I only get a very small grey line at the top when i load the site...

any suggestions?

[keylesslocks]

I still cannot figure out exactly where to place this code... no matter what I do I am having this problem.

[keylesslocks]

I just changed this code:
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

with this:
<div id="logoWrapper">
<div id="logo"><table id="Table_01" width="750" height="219" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<map name="FPMap0">
<area href="http://midwestapplianceparts.com/" shape="rect" coords="1, 5, 348, 80">
</map>
<img src="http://midwestapplianceparts.com/images/appliance-parts_01.jpg" width="375" height="93" alt="" border="0" usemap="#FPMap0"></td>
<td colspan="2">
<map name="FPMap1">
<area href="http://midwestapplianceparts.com/" shape="rect" coords="26, 0, 67, 20">
<area coords="78, 0, 174, 22" shape="rect" href="http://midwestapplianceparts.com/pages/about-midwest-appliance-parts-pv-c0-2.html">
<area href="https://midwestapplianceparts.com/account/login.html" shape="rect" coords="183, 1, 257, 19">
<area href="http://midwestapplianceparts.com/shopping-cart/" shape="rect" coords="268, 1, 373, 21">
</map>
<img src="http://midwestapplianceparts.com/images/appliance-parts_02.jpg" width="375" height="27" alt="" border="0" usemap="#FPMap1"></td>
</tr>
<tr>
<td>
<img src="http://midwestapplianceparts.com/images/appliance-parts_03.jpg" width="158" height="66" alt=""></td>
<td>
<table>
<tr>
<td><!-- START SCANALERT CODE -->
<a target="_blank" href="https://www.mcafeesecure.com/RatingVerify?ref=www.midwestapplianceparts.com">
<img width="94" height="54" border="0" src="file://images.scanalert.com/meter/www.midwestapplianceparts.com/13.gif" alt="McAfee Secure sites help keep you safe from identity theft, credit card fraud, spyware, spam, viruses and online scams" oncontextmenu="alert('Copying Prohibited by Law - McAfee Secure is a Trademark of McAfee, Inc.'); return false;"></a>
<!-- END SCANALERT CODE --></td>
<td><!-- Powered by: Crafty Syntax Live Help http://www.craftysyntax.com/ -->
<script type="text/javascript" src="/livehelp/livehelp_js.php?relative=Y&amp;department=1&amp;pingtimes=15"></script>
<!-- copyright 2003 - 2006 by Eric Gerdes --></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<map name="FPMap2">
<area href="http://midwestapplianceparts.com/dishwasher-parts-2/" shape="rect" coords="7, 2, 79, 31">
<area href="http://midwestapplianceparts.com/dryer-parts-43/" shape="rect" coords="81, 3, 117, 31">
<area href="http://midwestapplianceparts.com/fryer-parts-870/" shape="rect" coords="118, 2, 153, 31">
<area href="http://midwestapplianceparts.com/hot-water-heaters-955/" shape="rect" coords="155, 2, 236, 31">
<area href="http://midwestapplianceparts.com/humidifier-parts-914/" shape="rect" coords="237, 1, 299, 30">
<area href="http://midwestapplianceparts.com/hvac-parts-122/" shape="rect" coords="299, 2, 339, 30">
<area href="http://midwestapplianceparts.com/microwave-parts-537/" shape="rect" coords="341, 0, 407, 31">
<area href="http://midwestapplianceparts.com/refrigerator-freezer-65/" shape="rect" coords="407, 2, 479, 30">
<area href="http://midwestapplianceparts.com/stove-oven-range-58/" shape="rect" coords="480, 3, 558, 31">
<area href="http://midwestapplianceparts.com/washing-machine-39/" shape="rect" coords="559, 3, 666, 32">
<area href="http://midwestapplianceparts.com/water-filters-1/" shape="rect" coords="665, 3, 743, 33">
<area target="_blank" coords="285, 34, 389, 60" shape="rect" href="http://usps.com">
<area target="_blank" href="http://ups.com" shape="rect" coords="391, 34, 421, 60">
<area target="_blank" coords="492, 32, 559, 59" shape="rect" href="https://www.paypal.com/us/mrb/pal=5BEE7ZG9XH23W">
<area href="https://midwestapplianceparts.com/account/login.html" shape="rect" coords="566, 37, 741, 58">
<area href="http://midwestapplianceparts.com/pages/part-not-listed-pv-c0-1.html" shape="rect" coords="6, 63, 742, 121">
</map>
<img src="http://midwestapplianceparts.com/images/appliance-parts_05.jpg" width="750" height="126" usemap="#FPMap2" border="0"></td>
</tr>
</table> </div>

now it has old header pic and some html that isn't working...

[keylesslocks]

I am starting to think I can't just plop in some html code... but I hope I can

[s_t_e_v_e]

You are changing the correct file - be aware that absolute urls may cause problems with http: and https: pages.

Also be aware that those IDs for #logo and #logowrapper are styled in the stylesheet.css..

to have relative urls I suggest a bit of php in the form of..

<img src="<?php echo DIR_WS_TEMPLATE_IMAGES; ?>mypic.jpg" />

and your images will have to be in; includes - templates - yourtemplate - images

[keylesslocks]

steve thanks for the update... I updated all the image code as you said... but then all the happens is there is a large white space under the header and our live chat and hacker safe symbol show up.... but non of the other html or images for the header...

can I drop that html in the stylesheet? or should I remove the div id's?

thanks,

Eric

[s_t_e_v_e]

change the css for logo and logowrapper as needed, remove it if you wish...

can we see the site?

[keylesslocks]

the site is midwestapplianceparts.com

so can I just comment out the css in the spreadsheet file for logo and logo wrapper, then just paste my html in header doc?

~ Eric