Making Header Section Larger.

Yo Yo,

How do I make the section at the top larger - in height?

As you can see on my site www.footyshirts.eu, I want my header larger than the height allows on the top section.

Hi!

I need to go to catalog/template/default/css/
and edit default.css

Take care.

Thanks keyjo,

What do I look for once in the .css - which area do I edit?

Thanks.

Grab yourself a copy of the firefox browser and the "web developer" extension for it. One of the many useful things it allows you to do is that you can examine the style of elements displayed on the page and it will tell you the file and the css class name.

Assuming that you're basing your template on the default one, the sections that you would care about would be these in default.css... I'm using the XHTML-compliance patch so that probably affects this as well...
The div that represents the logo is "#header .a" (the within the in layout.tpl). You can just replace the background for ".a" with your own logo instead, and adjust the width and height to fit. If you do change the width, don't make it longer than the #container width minus the width of ".b", or the top navigation may drop unexpectedly, or overlap the logo in some browsers. There are ways to resolve this, of course.

fwiw, when I templated this I decided to scrap the default header styles and restyled the navigation to be under the header, with a modified shopping cart in the top right within the header that lists number of items instead of an expanding list. It looks really great, although because nested modules don't mesh well, only my navigation is in header.tpl...