Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Header background for Moderne theme - how this easily can be added
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

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.

Image Attachments
Header.JPG
 
Magento Community Magento Community
Magento Community
Magento Community
 
nikkstocks
Member
 
Total Posts:  47
Joined:  2008-06-08
 

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:

<table height="105" width="960" bgcolor=#f6f6f6>
<tr><td>
   <
div class="header">
        <
h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>"/></a></h1>

        <
a href="mailto:email@domain.com"><img src="<?php echo $this->getSkinUrl('images/side_logo_promo.png') ?>" alt="" class="side-logo-promo"/></a>
          <
br style="clear:both;" /><?php echo $this->getChildHtml('topMenu'?>
    
</div>
</
td></tr>
</
table>

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

/************************************************************/
/********************[ Mage_CSS_C Layout]********************/
/************************************************************/


/********************** Base Layout */

/* Structure */
.container      { width:960pxmargin:0 auto 0 autotext-align:left}
.header         { margin-bottom:12pxz-index:999text-align:left}
.middle         { min-height:350pxpadding:6px 0 50px 0}
.layout-1column { padding:0 30px 40px 30px}
.col-left       { float:leftwidth:220pxmargin-left:16px}
.col-right       { float:rightwidth:195pxmargin-right:13px}
.col-main       { float:rightwidth:705px}

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nikkstocks
Member
 
Total Posts:  47
Joined:  2008-06-08
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

Thanks! grin

 
Magento Community Magento Community
Magento Community
Magento Community
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

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?

 
Magento Community Magento Community
Magento Community
Magento Community
 
ShadyFeet
Jr. Member
 
Total Posts:  3
Joined:  2008-08-25
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
ShadyFeet
Jr. Member
 
Total Posts:  3
Joined:  2008-08-25
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
norbolig
Guru
 
Total Posts:  328
Joined:  2008-03-15
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Thejosh13
Sr. Member
 
Total Posts:  252
Joined:  2008-06-23
 

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?

 
Magento Community Magento Community
Magento Community
Magento Community
 
senthil_87
Jr. Member
 
Total Posts:  1
Joined:  2008-09-22
 

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.

Image Attachments
firefox.jpgie.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
nar
Jr. Member
 
Total Posts:  30
Joined:  2009-02-19
 
nikkstocks - 26 July 2008 04:05 PM

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

Did you ever figure out how to make it stretch across the whole page?

Thanks for the helpful post!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top