Magento

I have found one easy way of adding a new background in full page width for the Modern theme top header (a banner), and moving the logo within the header.

Two files are defining this; boxes.css and reset.css (both in skin/frontend/default/modern/css/.

Changing the position of the logo, edit the boxes.css, and look for the 4th line in the list below:

/********************** Header */

/* Logo */
h1#logo { float:left; }
.side-logo-promo { float:left; margin:15px 10px 0 10px; }
.page-popup h1#logo { display:none; }
.language-switcher { float:left; }
.language-switcher label{ color:#fff;}
.toplinks-bar { background:#444; color:#fff; padding:7px 13px; text-align:right; }
.toplinks-bar .top-links { padding-left:8px; }
.toplinks-bar .top-links,
.toplinks-bar .top-links li { display:inline; }
.toplinks-bar .top-links li { padding:0 4px 0 1px; }
.toplinks-bar .top-links a,
.toplinks-bar .top-links a:hover { color:#ddd; }
.toplinks-bar .top-links a { padding:0 7px 0 0; background:url(../images/links_separator.gif) no-repeat 100% 50%; }
.toplinks-bar .top-links .last a { padding:0; background:none; }
.search-bar { padding:3px 12px 2px 12px; border-bottom:1px double #dedede; background:#efefef; margin-bottom:16px; line-height:1.25em; }
.breadcrumbs { float:left; }
.breadcrumbs li { display:inline; line-height:18px; }
.breadcrumbs a,
.breacrumbs a:hover { color:#7f7f7f; }

Make your own header banner, follow the instructions below (it is related to the Modern theme).

1.  Make a new banner image (in the shown example, mine is just plain white). The original size of the header field is: 960 x 90 pixels. Name it body_bg.gif.

2.  Upload your header banner to this folder: skin/frontend/default/modern/images/
(before you do so, rename body_bg.gif that already is stored in the same folder to body_bgbackup.gif, in case you want to use it later).

3.  Define the position of the new banner and set the background color for the other part of your page.

These changes are done in the RESET.CSS (under skin/frontend/default/modern/css/).

- background-color: #E6E6E6; defines the color for the other part of your page as well as the footer)
- background-position: top center; this will position your new header correct aligned with the rest of the body

Replace the original code under

/******************************************/
/***********[ Mage_CSS_A Reset ]***********/
/******************************************/

* { margin:0; padding:0; }

body { background:#f2f2f2 url(../images/body_bg.gif) 0 0 repeat; color:#444; font:11px/1.55em arial, helvetica, sans-serif; text-align:center; }
a { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:underline; }
a img { border:0;}
:focus { outline:0; }

with this:

/******************************************/
/***********[ Mage_CSS_A Reset ]***********/
/******************************************/

* { margin:0; padding:0; }

body {
background-color: #E6E6E6;
background-image: url(../images/body_bg.gif); background-repeat: no-repeat;
background-position: top center;
font:11px/1.55em arial, helvetica, sans-serif;
text-align:center;
}
a { color:#CC0000; text-decoration:none; }
a:hover { color:#CC0000; text-decoration:underline; }
a img { border:0;}
:focus { outline: 0; }

4.  How to move your logo image src to the wanted position inside the header banner (defined in BOXES.CSS)

Now, you might want to move the header logo image src to the wanted position.

You can easily define the position in boxes.css (skin/frontend/default/modern/css/). As you wil see, I have added my own margin definition to the .page-head (line 2), in this case I have moved the logo a little to the right:

/* Page heading */
.page-head { margin:0 0 16px 0; }
.page-head-alt { margin:0 0 12px 0; }
.page-head, .page-head-alt { text-align:right; }
.page-head h3, .page-head-alt h3 {
margin:0;
font-size:23px;
font-weight:normal !important;
text-transform:none !important;
text-align:left;
}
.button-level h3 { /* heading level with buttons */
float:left;
width:60%;
}

See the enclosed screen picture for how the final result can look.

Click thumbnail to see full-size image

An alternative solution / hack, which separates the main background image from the header image:

in app/design/frontend/default/modern/template/page/html/header.phtml:

Put everything into a table with one row. Using the bgcolor parameter you can set the table background colour. Alternatively, you can use the background parameter to set a table background image. Mine looks like:

That alone will leave a gap at the top of the page where the main background will leak round. To fix this:

In /var/www/skin/frontend/default/modern/css/boxes.css goto this section and change the .container parameter from the default margin:16px i think it was) to margin:0

This will shift the entire page up slightly and fill the gap. There are then two easy ways to shift everything back down

1: Create new rows in the table you created in header.phtml and use  to fill them. Bit of an ugly fix
2: Create a new table just above the first one, using the same width and altering the height value to get the appropriate gap. nb - you will also need to set the background in the new table as well. Creating a new style may make this easier

You can also set the width and height of the table to 100%, so it will stretch to fill the header section - useful if you change the size of images in the header reguarly

Hi nikkstocks,

thanks for sharing. A separate header table that is separated from the main background image is exactly what I looked for, but don’t have the programming skills for doing myself.

I will try your solution out on my next web site.

no worries, and PM me if you get stuck. Now im just trying to figure out how to make it stretch across the whole page - not just the middle section. will update this if i figure it out

Thanks!

Another nice feature would be to add flash inside the header table. Have a look at this example: http://zozo.jp/

Is is possible to setup up the flash as a background, or will it overwrite the rest of the content in the header?

Hello,
So far I have found your suggestions VERY helpful and I’ve managed to change the header background colour on the main page of my store, but once I click on a product, it seems the rest of my store still has the blue background on the header and I’d like white. 

Is there an additional step I’m missing?  I love how you explain things, it’s very easy to understand.

Thank you!!

Hello, are you using the default layout (not the modern theme)? If so, that might be the reason ...

I’m using the default theme, I didn’t see an option for the modern theme?  How can I switch?  ver.1.1.3

You need to download and install the Modern Theme through Magento Connect. Here is a link: http://www.magentocommerce.com/extension/146/modern-theme-for-magento-frontend-interface

Further see the instructions for that theme.

I am trying to make the header height smaller but I can’t find where it is located. I tried cutting the header image in half but the height of the header box remains the same, it must be defined somewhere?

Hi nikkstocks,

Your method helped me solve my header issues, but now im facing a different sort of problem. Setting the .container margin to 0 closed up the gap only in firefox. In IE the gap is huge. Is there anything i have to add to the ie7.css file?

Images attached below shows the difference between firefox & IE

Any help on this issue wld be much appreciated.

Click thumbnail to see full-size image