Page layout question

In my header I have Contact Us and Shipping & Returns; however, that's not where I would like to permanently leave those links. So, how possible is it going to be to completely remove that entire green bar with those two links and then place those links, along with others, somewhere along side my Mower Part Supply logo? I might even like to put those links in the solid portion of the grass but darned if I know how....

Ian
http://mowerpartsupply.com/catalog/

I think this is in the define ezpages under tools tab. you want to disable those ez pages in the header

Ok, so I've done that. Now I need to proceed to lifting the catagories box up to the logo.

Ian

bump bump

Do you mean having your products categories accessible from the header?

If so, I think there are some good mods you can install such as

http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_62&products_id=476

It's worth a try. Remember to backup before adding any mods.

I might even like to put those links in the solid portion of the grass but darned if I know how....

If you want menu integrated into your header graphics, then you'll definitely need to slice your graphics up with photoshop once you added the menu items in the graphics. Make those slices into a link afterwords.

I hard coded my menu with simple javascript rollover. You can find the link in my sig, hopefully, this is what you're looking for.

saitomedia:

Do you mean having your products categories accessible from the header?

If so, I think there are some good mods you can install such as

http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_62&products_id=476

It's worth a try. Remember to backup before adding any mods.



If you want menu integrated into your header graphics, then you'll definitely need to slice your graphics up with photoshop once you added the menu items in the graphics. Make those slices into a link afterwords.

I hard coded my menu with simple javascript rollover. You can find the link in my sig, hopefully, this is what you're looking for.

Well, I'm not talking about having my same products "categories" menu in the header. I don't really think it needs to be listed twice. I looked at your site and it's pretty similar to what I'm talking about doing. Look at the page
http://mowerpartsupply.com/test6.html

Do you see how the links for "warranty, location, and about us, etc" are kind of in the header? I'd ultimately like to be able to have more links up in that area where the grass is. I know I could have some ez pages links right below the grass but that's not what I want. I don't know where to start or where to look to try to start putting those links in the header. I also want to move everything upward so there isn't a blank white space between the header and everything below the header. What should I do? Thanks.

Ian

There's nothing that says your ez-pages header bar needs to remain a full width block sitting below the header image.
Add to your stylesheet

#navEZPagesTop {
    width: 432px;/*adjust to taste*/
    float: right;
    }

To get it into the header image, you may need to alter the setup so that the image is the #headerWrapper background, and the #logo div is a smaller transparent block located above the "grass" area. This can be fine-tuned in the stylesheet.

gjh42:

There's nothing that says your ez-pages header bar needs to remain a full width block sitting below the header image.
Add to your stylesheet

#navEZPagesTop {
    width: 432px;/*adjust to taste*/
    float: right;
    }

To get it into the header image, you may need to alter the setup so that the image is the #headerWrapper background, and the #logo div is a smaller transparent block located above the "grass" area. This can be fine-tuned in the stylesheet.

Okay, so I added that bit of code to my
includes/templates/mower/css/stylesheet.css and uploaded it.
I then turned on the ez pages header and it produced it's own block again for the header. I was hoping the ez pages links would somewhere magically appear in my background header image but I guess not. So, something isn't quite right I gather. Now what?

Ian

It's not "isn't quite right", it just isn't finished yet. I said there would be more tweaking to do.

First, there is a <br class="clearBoth" /> at the bottom of the logo code which you will have to remove in /includes/templates/your_template/common/tpl_header.php. That forces the next element to be below the logo, which you don't want. From view source:[html]<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><a href="http://mowerpartsupply.com/catalog/"><img src="includes/templates/mower/images/logo-zc2.jpg" alt="Back to Mower Part Supply Home Page [home link]" title=" Back to Mower Part Supply Home Page [home link] " width="200" height="150" /></a></div>
<div id="taglineWrapper">

<div id="tagline"><h1></h1></div>
</div>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<div id="navEZPagesTop">
<a href="http://mowerpartsupply.com/catalog/index.php?main_page=contact_us">Contact Us</a>

</div>
<!--eof-header ezpage links-->
[/html]Try that and let's see what you have... one step at a time.

In your stylesheet, you will want to give #logoWrapper a width: 200px;
and you can increase the #navEZPagesTop width by 100px more or less.

#navEZPagesTop width by 100px more or less.

Probably more like 70-80px.

Here are some stylesheet changes that will work:

First, move the #navEZPagesTop that is above #logoWrapper down to merge with the one that is below #navBreadCrumb, as shown.

Move the #logoWrapper bg to #headerWrapper as shown.

#logoWrapper+.clearBoth {display: none;}
in modern browsers will suppress the clearBoth temporarily.

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: 30px center;/*adjust as required*/
	}	

#logoWrapper {
	width:200px;
	height:150px;

	/*background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
 you will probably need to move these
 into a #headerWrapper rule as shown above*/

	float: left;
	}

#logoWrapper+.clearBoth {display: none;}
/* this won't work in IE6. in other browsers, it gives a taste of what will 
happen when you delete the <br class="clearBoth" /> in tpl_header.php */

...

#navBreadCrumb {
	padding: 0.5em 0.5em;
	background-color: #ffffff;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	}

#navEZPagesTop {
	width: 512px;/*adjust to taste*/
	float: right;
	background: none;
	font-size: 0.95em;
	font-weight: bold;
	margin: 113px 0 00em;
	padding: 0.5em;
	}

Glenn is right. You need to continue to modify the header file.

Here's my take.

1. Backup your top_header.php file and put it aside. You can revert the changes if things don't work after following the below info.

2. Look into tpl_header.php in your current template, and comment out the entire branding section with the red indicated code. This will eliminate zen cart default header all together.

<!--bof-branding display-->
<!--
<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>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
-->
<!--eof-branding display-->

3. Add your header HTML section (which I took from http://mowerpartsupply.com/test6.html, and added <table> and </table> tag) after the <!-eof-branding display-->

<!-- bof Mower Part Supply header --> 
<table cellspacing=0 cellpadding=0>
<tr>
      <td width="250" height="114"><div align="left"><img src="test6_files/top-mower-logo.gif" alt="animated lawn mower" width="250" border="0" height="128"></div></td>
      <td colspan="2" valign="top" width="576" bgcolor="#cfe5fa" height="114"><img src="test6_files/equipment-supply.jpg" alt="662-895-3442" width="440" height="125"><a href="https://www.cartmanager.net/cgi-bin/cart.cgi?ViewCart=igilmore" target="_blank"><img src="test6_files/view_cart1.jpg" alt="View Cart" width="100" border="0" height="125"></a></td>
      <td width="6" bgcolor="#cfe5fa" height="114"> </td>
    </tr>
    <tr>
      <td valign="top" width="250" height="1"><img src="test6_files/mower_part_supply.gif" alt="landscaper supply" width="250" border="0" height="60"></td>
      <td colspan="2" width="560" background="test6_files/recurring_grass.jpg" height="1"><a href="http://mowerpartsupply.com/warranty.php"><img src="test6_files/warranty_button.gif" alt="warranty" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/location.php"><img src="test6_files/location_button.gif" alt="location" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/about-us.php"><img src="test6_files/about_button.gif" alt="about us" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/privacy.php"><img src="test6_files/privacy_button.gif" alt="privacy" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/order-info.php"><img src="test6_files/order_button.gif" alt="order info" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/hours.php"><img src="test6_files/hours_button.gif" alt="hours" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/returns.php"><img src="test6_files/returns_button.gif" alt="returns" width="80" border="0" height="60"></a></td>
      <td width="6" bgcolor="#046b34" height="1">
      <img src="test6_files/last-grass.gif" width="6" border="0" height="60"></td>
    </tr>
</table>
<!-- eof Mower Part Supply header --> 

This will replace the entire zen cart header with yours. You are 1/2 way into this already, but you just need to continue to tweak your tpl_header.php file so it contains your links in the graphics.

Don't forget to change those links in the above code to relative links. You don't want any URL in any of your links in zen cart, otherwise, using the same code in the SSL section will render "This page contains secure unsecure contents".

saitomedia:

Glenn is right. You need to continue to modify the header file.

Here's my take.

1. Backup your top_header.php file and put it aside. You can revert the changes if things don't work after following the below info.

2. Look into tpl_header.php in your current template, and comment out the entire branding section with the red indicated code. This will eliminate zen cart default header all together.

<!--bof-branding display-->
<!--
<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>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
-->
<!--eof-branding display-->

3. Add your header HTML section (which I took from http://mowerpartsupply.com/test6.html, and added <table> and </table> tag) after the <!-eof-branding display-->

<!-- bof Mower Part Supply header --> 
<table cellspacing=0 cellpadding=0>
<tr>
      <td width="250" height="114"><div align="left"><img src="test6_files/top-mower-logo.gif" alt="animated lawn mower" width="250" border="0" height="128"></div></td>
      <td colspan="2" valign="top" width="576" bgcolor="#cfe5fa" height="114"><img src="test6_files/equipment-supply.jpg" alt="662-895-3442" width="440" height="125"><a href="https://www.cartmanager.net/cgi-bin/cart.cgi?ViewCart=igilmore" target="_blank"><img src="test6_files/view_cart1.jpg" alt="View Cart" width="100" border="0" height="125"></a></td>
      <td width="6" bgcolor="#cfe5fa" height="114"> </td>
    </tr>
    <tr>
      <td valign="top" width="250" height="1"><img src="test6_files/mower_part_supply.gif" alt="landscaper supply" width="250" border="0" height="60"></td>
      <td colspan="2" width="560" background="test6_files/recurring_grass.jpg" height="1"><a href="http://mowerpartsupply.com/warranty.php"><img src="test6_files/warranty_button.gif" alt="warranty" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/location.php"><img src="test6_files/location_button.gif" alt="location" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/about-us.php"><img src="test6_files/about_button.gif" alt="about us" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/privacy.php"><img src="test6_files/privacy_button.gif" alt="privacy" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/order-info.php"><img src="test6_files/order_button.gif" alt="order info" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/hours.php"><img src="test6_files/hours_button.gif" alt="hours" width="80" border="0" height="60"></a><a href="http://mowerpartsupply.com/returns.php"><img src="test6_files/returns_button.gif" alt="returns" width="80" border="0" height="60"></a></td>
      <td width="6" bgcolor="#046b34" height="1">
      <img src="test6_files/last-grass.gif" width="6" border="0" height="60"></td>
    </tr>
</table>
<!-- eof Mower Part Supply header --> 

This will replace the entire zen cart header with yours. You are 1/2 way into this already, but you just need to continue to tweak your tpl_header.php file so it contains your links in the graphics.

Don't forget to change those links in the above code to relative links. You don't want any URL in any of your links in zen cart, otherwise, using the same code in the SSL section will render "This page contains secure unsecure contents".

This idea scares me in that I'm about to making things worse. I'm sure you haven't noticed but the header and logo between the two different pages are very different. Test 6 breaks the logo into two images and uses a recurring image for the grass while my zencart page uses one image for the entire logo and then the background header is again one huge logo with no recurring grass because the grass is made into the header image. Are you still sure this idea is still a good one with this new info? If so I'll still try it.

Ian

http://mowerpartsupply.com/test6.html
http://mowerpartsupply.com/catalog/

These are two completely different approaches to the problem. You can do one or the other; either can work, though you have the first one half done already (7/8 done if you apply the stylesheet changes in my last post).

Be aware that using static links like the ones in your original HTML would cause SSL problems down the road as saitomedia says, and you would have to convert those to relative/dynamic links.

The links will be built automatically if you continue to use the ez-pages navbar to display them.

gjh42:

These are two completely different approaches to the problem. You can do one or the other; either can work, though you have the first one half done already (7/8 done if you apply the stylesheet changes in my last post).

Be aware that using static links like the ones in your original HTML would cause SSL problems down the road as saitomedia says, and you would have to convert those to relative/dynamic links.

The links will be built automatically if you continue to use the ez-pages navbar to display them.

Ok, this sparks a good question. The approach that your advising will allow those links to be made using the ez-pages feature but the other will not, right? If so I definitely would prefer those links be ez style.

Ian

Correct. You *could* insert the ez-pages bar into the HTML header, but it would be a bunch more work.

Okie dokie. I'm pretty sure I did what you said but I'm afraid the result was less than desirable. Have a look. I deleted the ezNavTop thing from where you said and then added your bit of code down below. I've clearly screwed something up pretty bad. On a side note, I'm making these changes but I have no idea why.

Ian

You want this in your stylesheet:

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: 41px center;/*adjust as required*/
	}	

#logoWrapper {
	width:200px;
	height:150px;
	float: left;
	}

#logoWrapper+.clearBoth {display: none;}
/*this is temporary and lets the ez-pages bar sit next to the logo -
you need to delete the <br class="clearBoth" /> in tpl_header.php as advised above.*/

and lower

#navEZPagesTop {
	width: 512px;
	float: right;
	background: none;
	font-size: 0.95em;
	font-weight: bold;
	margin: 113px 0 0 0em;
	padding: 0.5em;
	}

margin: 113px 0 00em; might be a problem - should be margin: 113px 0 0 0em; note space between zeros.

What browser are you using? IE6 doesn't know how to interpret #logoWrapper+.clearBoth

gjh42:

You want this in your stylesheet:

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: 41px center;/*adjust as required*/
	}	

#logoWrapper {
	width:200px;
	height:150px;
	float: left;
	}

#logoWrapper+.clearBoth {display: none;}
/*this is temporary and lets the ez-pages bar sit next to the logo -
you need to delete the <br class="clearBoth" /> in tpl_header.php as advised above.*/

and lower

#navEZPagesTop {
	width: 512px;
	float: right;
	background: none;
	font-size: 0.95em;
	font-weight: bold;
	margin: 113px 0 0 0em;
	padding: 0.5em;
	}

margin: 113px 0 00em; might be a problem - should be margin: 113px 0 0 0em; note space between zeros.

What browser are you using? IE6 doesn't know how to interpret #logoWrapper+.clearBoth

Ok, I made sure my css file resembled the code you have above and you can now see the changes. Something is still not quite there yet. I'm using FireFox. I checked it with both FF and IE and they both display the same thing for me.

Ian

It is acting like you have deleted the <br class="clearBoth" /> in the wrong location. You should still have this in tpl_header.php:[php]<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">[/php]Lower, it should look like this:[php]<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<!--eof-branding display-->

<!--eof-header logo and navigation display-->[/php]Removing the clearBoth from below the logo lets the headerWrapper collapse since there are no static elements in it now, so add a height to #headerWrapper:

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: 41px center;/*adjust as required*/
	height: 191px;
	}

Looking good now. Add that height to #headerWrapper and the background should be able to display.