Mostly grey logo.

hello,
i am using the mostly grey template and have a tallish logo which stretches my header to bigger than i want.

there is room above the logo (about 1cm) that is blank which i would like to move the logo up into so the header isnt so tall.

as far as i can tell the reason its not already in this space is because to the left side of the logo there are the login options. these will not clash with my logo if i move it up.
(maybe i'm supposed to do something in tpl header? where the code is layed out with login options above logo)

so what can i do to move my logo up into this space?

https://www.gogreencomputers.com.au

This is not that easy to achieve, but it can be done.

The tpl_header.php file in ../templates/common/ contains a NAVIGATION section and a BRANDING section. If you open that file in a plain text editor, you will see them clearly delimited by comments such as:

THEN SOME CODE

and

THEN SOME CODE

The top part of your image needs to go into the NAVIGATION section and the bottom part in the BRANDING section.

So (largely by trial and error), you will have to SLICE your image horizontally, just at the right place, so that you can fit the top bit into the NAVIGATION bar in a way that makes it sit seamlessly with the bottom slice of the image.

There are two ways to do this - the first is easier from a code point of view. The second requires editing the code in tpl_header.php AND in the language file called header.php (make sure it's the LANGUAGE file... !)

First way.
Look at your stylesheet and see what MARGIN and PADDING values are applied to #navMainWrapper. These two declarations will position the contents of that <div>, so they will probably need to be adjusted one way or the other to accommodate your image top slice.

You will (probably) need to add:

background-image: url(../images/top_slice.jpg);

to #navMainWrapper

Then... put your top image (top_slice.jpg) into the images folder of your TEMPLATE - (same folder level as css folder).

Load the page and see how it looks at this point. Don't worry about the "bottom_slice" yet...

Use FIREFOX firebug tools to do an off-line edit of the css, adjusting the MARGIN and PADDING values of the #navMainWrapper declaration. Observe how different values influence the position and "cut-off" of top_slice.jpg.

You will want the bottom of the slice to rest EXACTLY at the base of the wrapper.

Now load your bottom_slice.jpg into the same images folder.

This time, use firebug tools to adjust values of margin and padding in #logoWrapper.

The TOP slice in this scenario is a background-image, whereas the BOTTOM slice is your logo image.

Second way
(This is a combination of the above AND edits to the following)

You will see in tpl_header.php, the BRANDING section contains a lines:

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

Now, you can copy this line in order for it to call the top slice into the NAVIGATION section:

<div id="navMainWrapper">
<div id="navMain">
    <div id="logoTop"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_TOP_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_TOP_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

Look CAREFULLY at the two little edits I have made to the code... Can you see them? They are:

1. div id="logoTop"
2. HEADER_LOGO_TOP_IMAGE

Now... HEADER_LOGO_TOP_IMAGE is a "constant", so it needs to be defined in order for the php to know what to do with it...

Open:

includes/languages/english/header.php

There you will see:

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

Now you need to add a define:

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'bottom_slice.jpg');
  define('HEADER_LOGO_TOP_IMAGE', 'top_slice.jpg');

NOTE: Your edited files should all be saved into your respective over-rides folders (your_template).***

Now, the SECOND method calls the top_slice.jpg as a FOREGROUND image.

You can still adjust its position by stylesheet declarations of margin and padding.

There are likely to be other adjustments such as HEIGHT...
See the languages header.php (sample above) which shows a HEIGHT setting (though I understand this has no influence and the HEIGHT is adjusted in the CSS.

for #logoWrapper there is a height declaration

You could probably add a similar height declaration to #navMainWrapper as a further variable to help you line up your two "slices" accurately.

Note: you now also have a "new" div called #logoTop, and you can add declarations to this in the css too !