Trying to seperate header to achieve a different look

Hello;

I've searched here and online and have not been able to find a solution. I'm trying to create a new template for my site (which I also intend on sharing here) however, have come across a stumbling block.

I've envisioned a header and footer very similar to the ZC forum or Google Analytics home page where the header is stretched on top but the ezpage, logowrapper, categories, content etc are all at 950px.

In CSS, I've changed headerwrapper, logowrapper and navmainwrapper to 100% and mainwrapper to 950px. When I load this template, the whole site stretches to 100% which I don't want at all. Can someone point me to the right direction? I can send you the link to the site via pm if you are interested to see it. Any help would be appreciated.

Thank you

That would be because those items you changed to be 100% are contained within the mainWrapper.....you will need to make changes to move the header div outsid of the main wrapper

barco57:

That would be because those items you changed to be 100% are contained within the mainWrapper.....you will need to make changes to move the header div outsid of the main wrapper

Thank you. I'm not sure how to do that. Would that be in tpl_header file?

in includes/tempates/your_custom_template/common/tpl_main_page.php about line 64```
<div id="mainWrapper">

Move the mainWrapper div down

<?php
 /**
  * prepares and displays header output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_HEADER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_header = true;
  }
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>
<div id="mainWrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">

That did the trick. Thank you. But now all the contents in the mainwrapper disappeared. It's just white. :no:

When I look at view source, it shows all the information that should be there, but the page displays blank. Very confused.

AppleZen has a similar effect to the one you are trying to achieve. Get a copy of that template (free-addons) and look at its structure.

Played around with the CSS and was able to bring the content back, however, it's all over the place. Any CSS guru's out here, if you can please help me, I'd be grateful. The link is koshandjane dot com / zencart

schoolboy:

AppleZen has a similar effect to the one you are trying to achieve. Get a copy of that template (free-addons) and look at its structure.

Thank you again. I will do that. I appreciate your help.

You need a <br class="clearBoth"> after the headerWrapper closing div tag.....and then the elements inside the header that are shoved over to the left need the margins set like so```
margin: 0 auto;

Thank you barco57. You were right on target.

I'm not sure what I'm doing wrong but the ezpage header menu is not adjusting to the size that is in the CSS. It's shifted a little to the right and looks off. I'm trying to figure it out but if someone that knows what my problem might be, if you can help me - I would appreciate it!:hug:

the site is koshandjane dot com / zencart

Sorry - I'm not trying to bump or annoy but am at my wits end. I've been playing around with CSS and googling to see how to fix the width issue for my template and can't seem to figure it out. Any CSS help that one can provide or point to the right direction would be appreciated. I looked at the Cherry Zen file structure as instructed and was not able to understand the difference with my limited knowledge. I'm attaching a screenshot as well.

Your solution will lie in how you structure your tpl_header DIVS, and how the DIVS are nested.

In a standard template (like classic) the overall site width is largely controlled by the main wrapper, and the header divs are nested within the main wrapper, so will inherit CSS conditions applicable to main wrapper.

To get the header DIVS to operate separately from the conditions imposed by the CSS controlling the main wrapper, you need to separate out the relevant header divs FROM the main wrapper, so they do not inherit the CSS conditions for main wrapper.

It may be useful to then NEST your header divs (that need separate css conditions) in another DIV of your own making, and THAT div is the one where you declare widths... The divs nested in that new div will then inherit the conditions imposed, unless you chronologically over-ride them in the declarations for each specific "sub div".