Page layout question

**gjh42** · 21 Dec 2008, 07:47 PM

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.

Code:

#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;
	}

**saitomedia** · 21 Dec 2008, 07:55 PM

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.

Code:

<!--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-->

Code:

<!-- 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">&nbsp;</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".

**r1formetoo** · 23 Dec 2008, 03:41 PM

Originally Posted by 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.

Code:

<!--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-->

Code:

<!-- 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">&nbsp;</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/

**gjh42** · 23 Dec 2008, 07:27 PM

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.

**r1formetoo** · 23 Dec 2008, 08:52 PM

Originally Posted by 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

**gjh42** · 23 Dec 2008, 08:59 PM

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

**r1formetoo** · 23 Dec 2008, 09:13 PM

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

**gjh42** · 23 Dec 2008, 09:26 PM

You want this in your stylesheet:

Code:

#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

Code:

#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

**r1formetoo** · 23 Dec 2008, 09:47 PM

Originally Posted by gjh42

You want this in your stylesheet:

Code:

#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

Code:

#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

**gjh42** · 23 Dec 2008, 10:37 PM

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 Code:


<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">

Lower, it should look like this:

PHP Code:


<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<!--eof-branding display-->

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

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:

Code:

#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.

Thread: Page layout question

Thread Tools

Search Thread

Display

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Re: Page layout question

Similar Threads

Main Page Layout Question

Product Listing display page / category page layout change question

Home Page Layout Question

Page layout question

Question on page layout changes

Posting Permissions