can you make header and page different widths?

[1kell]

I want my header to be white across the screen in the background, and the rest of the page to have the background colour. The only way I think I can do this is to make the header stretch accross the whole screen, while keeping the rest of the page as wide as it is.

Can you make the header 100% while the rest of the page is 80%?

[kuroi]

Certainly. Two ways.

You could edit your site's common/tpl_main_page.php to move the header block outside of #mainWrapper and then set you #headerWrapper width to 100%

or

set the width of #mainWrapper to be 100%, and constrain the width of #contentMainWrapper. This would also result in a 100% wide footer.

[1kell]

Thank you, that sounds easy. The first option is what I am trying to do. Only how do you move the header block out??? I am still a bit newish at this.

[1kell]

I don't have #mainwrapper in that file. I guess it may be css?..

[kuroi]

Create an override for tpl_main_page.php as explained in the FAQ. Then in the override file move this block

<?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');?>

up one line, so that it comes before this

<div id="mainWrapper"> 

[1kell]

Excellent! Worked a treat and looks awesome

[1kell]

Now just wondering one thing - how to stop the header scrolling with the rest of the page. So it stays put when you scroll down the rest of the page.

[1kell]

having a bit of a problem. I changed as per above and its great. I am trying to move the content of the header so it is inline with the main page below it. I have been trying to pad margins. I have been able to do this with the logowrapper, but its having the wrong effect. The headerwrapper had the wrong effect too. What I am getting is the whole headerwrapper shrinking. I want it to stay at 100% but "pad" the sides like you do with tables. Here is the code I have in css:

/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 80%;
vertical-align: top;
border: 1px solid #518240;
}

#headerwrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#headerwrapper{
background-color: #ffffff;
}

#logoWrapper{
background-color: #ffffff;
height:85px;
margin-left: 13em;
margin-right: 13em;
}


Any suggestions?

[kuroi]

How sites work is down to the interaction of the HTML and CSS. Seeing a snippet of one along is often not enough.

I can see that you have given your mainWrapper a width of 80% which means that there's a margin of 10% each side (probably (assuming that you have centered it, can't tell from the snippet). But you have put margins of 13em each side of the logoWrapper.

There will be only one browser width at which 13em = 10% of the available window. I doubt this is what you really want, especially as it will chanmge slightly from browser to browser and dramatically of the vistitor changes their font size.

Overall though to give more help on this, it would be necessary to the site.