22

Make a nice header for your store in osCommerce v2.3.1

multimixer | learn | Thursday November 25 2010

Make a nice header for your store

Somebody asked recently  in the osCommerce forum  how to change the height of his header. The problem was that his logo image was taller than the height of the header in the default osCommerce temlplate.

The header looks by defalt like this:

The default osCommece header in version 2.3.1

The osCommerce logo used in the default template is 50px x 200px. The header itself is set to be 60px. After uploading a logo image that is taller than 60px, like the forum poster did, the result doesn’t look very promising. Half of the logo is hidden behind the page content.

Half of the logo is hidden

No reason to panic. Opening the file catalog/stylesheet.css, we see close to the top, following entry:

#header {
  height: 60px;
}

By simply removing any height definition, the header will expand to the height of the logo image, so it gets visible. Your stylesheet.css file will look as follows

#header {
}

and your header will be similar to this

The header with a taller logo

Do you like it? Me neither. Same an other poster in the osCommerce forum not, who said “but it also moves the ui menu for cart contents, checkout, and my account lower also along with white space. How can you get his menu to sit on top of or merge into the logo?”

Really, how can you do this? Keep on reading and you’ll see that you can do anything you want with your store’s header in few simple steps. Lets take everything from the beginning.

Since we talk about the header, the closest file to start looking at is catalog/includes/header.php. Do not worry, we’ll just look at it for a better understanding, we’re not going to touch it by any means. The whole header, is all in all this piece of code

<div id="header" class="grid_24">
  <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

  <div id="headerShortcuts">
<?php
  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }
?>
  </div>

<script type="text/javascript">
  $("#headerShortcuts").buttonset();
</script>
</div>

To make it very simple, and to take out any possible confusion, it’s basically this

<div id="header" class="grid_24">
  <div id="storeLogo">the logo</div>
  <div id="headerShortcuts">button 1 button 2 button 3</div>
</div>

We can close the file again, because we’re not going to do anything with it. What we see is that we have all in all 3 classes that are responsible for how the header looks like. We’ll find this classes in file catalog/stylesheet.css . Here they are:

#header {
  height: 60px;
}

#storeLogo {
  float: left;
  margin-top: 5px;
}

#headerShortcuts {
  float: right;
  margin-top: 15px;
}

We have one “container” the #header and inside 2″sections”, the one is floating left (#storeLogo) the other right (#headerShortcuts) So, everything is very simple and we can do whatever we want now, without touching the file includes/header.php. I did following:

#header {
	/*height: 150px;*/
	background-image: url(images/my_header_image.png);
	background-color:#804224;
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, left top, right top, from(#FFF), to(#402112));
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(left top, #FFF, ##402112);
}

#storeLogo {
  float: left;
  margin-top: 5px;
}

#headerShortcuts {
  float: right;
  margin-top: 50px;
  padding:10px;
  background-color:#FFF;
  background-color: rgba(255, 255, 255, 0.6);
  border:5px solid rgba(255, 255, 255, 0.7);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:0 0 10px #000;
  -moz-box-shadow:0 0 10px #000;
  -webkit-box-shadow:0 0 10px #000;
}

Lets see how it looks

The result of our styling

Well, not the prettiest, but that’s up to you to make it as you like. This here is just an example. There is also no background image in the example header I posted here, even it’s defined one in the css. That’s just because I didn’t had any by hand. But you can place one, in the way shown here. To not totally cover the background color I would use a transparent .png

There are really many css tutorials available, search a little and you will see how easy you can do great things with your header

Here is another header I did, that is in use in a real store. I just replaced the logo for the screenshot.

A header of a store I did

Hope you enjoy it to be creative

Click +1 to recommend this to your friends when they search.

multimixer

follow multimixer on Twitter

Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.

If you like what you read and if you think it will help you in your online business, then please consider a donation.

There is no obligation to do so and all information provided here is free to use.

It will however help to keep this blog alive, free of advertising and full of content.

  • Finn Nielsen 16/12/2010 at 17:46

    Hi!

    this doesn’t seem to work in any browser?

    #header {
    /*height: 150px;*/
    background-image: url(images/my_header_image.png);
    background-color:#804224;
    /* For WebKit (Safari, Google Chrome etc) */
    background: -webkit-gradient(linear, left top, right top, from(#FFF), to(#402112));
    /* For Mozilla/Gecko (Firefox etc) */
    background: -moz-linear-gradient(left top, #FFF, ##402112);
    }

    it is just a solid brown

    merry X-mas

    Finn

  • Suzie 03/02/2011 at 12:32

    This was very helpfull thank you! But I have a problem, I want to use java script in my header. I did redo the code like this:
    <div id="header" class="grid_getGridContainerWidth(); ?>”>

    jseyes(400,60);

    But it is now showing nothing in my header. What am I doing wrong?

    • multimixer 03/02/2011 at 13:45

      What you posted is not correct. I don’t know what you’re trying to do, but it should be

      
      

      or

      
      

      depending on your setup

      Regarding the Javascript, what you posted don’t say much, can you explain a little more what you try to do?

  • Dan 30/11/2011 at 22:47

    Hi,
    I see you are really good at redesigning the osCommerce template. I like it. I was wondering how can you strech the header from left margin to right margin of the page with a background color and the header to be in the same position?
    Which file do you have to modify to be able to do this? is it template_top.php? Do you need to add other div tag? I see the #bodyWrapper gets its width from a function…

    • multimixer 05/12/2011 at 12:33

      Yes, that is certainly possible, you would not “stretch” anything, just set a background color to a container element that is out of the “container_24″ div, which is the one limiting the width initially

      The file to work on is includes/header.php. You need to close the containet_24 div, add another around the whole header, wrap it’s contents into container_24

      Then you can set a background color to the header wrapper

      • Alex 15/03/2013 at 04:55

        Hello!
        Can you please provide the an example of the code you used for your header – when you said
        “The file to work on is includes/header.php. You need to close the containet_24 div, add another around the whole header, wrap it’s contents into container_24″?

        Thanks!
        -A

  • Ecs 19/05/2012 at 21:52

    I was wonder if there is a way to replace the header with one from our main site and have the store more inside of a table then a whole page of its own?

    This way our header stays active at all times

    Cheers
    Sean H

  • multimixer 20/05/2012 at 07:57

    @Sean

    I don’t know what you mean with having “the store inside a table”, I guess you mean something like to pull the osCommerce page contents and to display them within the regular html page structure you already have

    While this is not impossible to do, it is far more complicated than to just recreate the header you already have within osCommerce too

  • shiry 14/06/2012 at 03:57

    hi. how do you do the menus in the header section e.g contact us, about us etc. – osCommerce v2.3.1?

    Thanks,
    Shiry.

  • multimixer 19/06/2012 at 15:22

    @shiry, I just made a new post that cover exactly this http://goo.gl/jy9cH

  • shiry 20/06/2012 at 20:39

    Thank You.

  • OScommercen00b 10/07/2012 at 13:42

    Hello Multimixer,

    I’m setting up oscommerce for the first time – i have a problem.

    Before playing with the header, as above, I followed your advise on the 960grid system and stretched it out to a FLUID grid.

    Removing height60px from the header gave me the desired result,
    except it started to look different with cart contents/checkout/my account being directly BELOW the image.

    So after employing the remaining code it keeps everything the same and the padded box is not there.

    IT has worked in the past when the cart contents/checkout/my account was still on top…I’m not sure if im being clear :(

  • multimixer 10/07/2012 at 14:43

    would not use a “fluid” grid, since it will be the only “fluid” part of your website, while anything else (like images etc) will have still a fixed pixel width. It won’t look nice

    The buttons move under the image (that I guess is your logo) because there is no space to have everything in the same row, logo + buttons. In other words, your logo is too wide

    What to do?

    Either create a smaller logo, or add following to your css file

    #storeLogo{position:absolute; top:10px; left:10px} and then set the settings for top and ledt as you need them

    This will make the buttons to float over the logo

    I’ve no idea what you mean with “padded box” …

  • Steve Marino 21/07/2012 at 20:59

    Hi, i was wondering about using another grid system that would be more responsive…i.e. adapt to tablet and mobile phones. I know it would take alot of hacking up to accomplish this, as far as i know. I’m not sure what a good mobile strategy is for a 2.31 store. I do need a responsive solution. I’m not worried about the admin area, that doesnt have to be touched. Thanks for any advice.

  • Basheera 18/08/2012 at 10:37

    Hi, great tutorial. How do I get the buttons directly under the logo section and to Aline to the width of the header, as shown in your orange Example here?

  • Adam 20/12/2012 at 20:32

    Although using a different version of Oscommerce I have used some of the above code for my social icons. Thanks

    • multimixer 27/12/2012 at 12:36

      The header is exactly same for the 3 latest osCommerce versions (2.3.1, 2.3.2 and 2.3.3), so it makes no difference, any tips that work for version 2.3.1 will work on the next 2 versions too

  • Michael 08/02/2013 at 23:21

    Hei, can u tell me please, how i get the background-image into SAFARI and GOOGLE CHROME….
    I put my Image into the Stylesheet.css /
    #header {
    background-image: url(images/…..jpg);}

    it works fine in FireFox – but how i can get that work in CHROME & SAFARI

  • multimixer 16/02/2013 at 18:59

    Hi Michael

    There is no difference in adding a background image for different browsers, the reason why you can see it just in FF may be something else

    It’s impossible to say much without seeing the website

  • mathew 22/06/2013 at 07:19

    hi
    please help me how to change oscommerce store logo png to flash format

    • multimixer 22/06/2013 at 08:00

      You don’t want the store logo to be a flash movie

      What you need to do is, to add your movie into the “header” div
      However, if you want to replace the logo with flash, then you can replace this code

      tep_image(DIR_WS_IMAGES . ‘store_logo.png’, STORE_NAME)

      with you flash

Leave a Reply