Problem with logo i uploaded

[edealbase]

Hi,

I'm having a problem with my logo. The dimensions of it are 1000 x 250 i uploaded it and when i resize the page the rest of the page adjusts to the correct size, however the logo just stays the same size and sticks out at the end.

Additionally when i view it on a bigger screen it dosent reach the full way across the page. Ive tried chaging the logo px size in zen cart to match the size of the image and that didnt work.

I'm not sure how to make it resize with the screen?

Incase its relevant, i made my template from a copy of the classic template and adjusted the page to fill 100%

[RuFuS]

I am confused to what you mean, if your logo is one solid image of 1000px wide it will never resize itself..

Have you go a url I can look at?

[edealbase]

Yea its a solid image. I mean is there a way i can make it auto fill the page and decrease when you make the page smaller?

the site inst running yet, but you can see what i mean at

www.edealbase.co.uk/index.php

[RuFuS]

What you need to do is split that header up

Try this (after backing everything up):

In your css

Change your #tagline block and logowrapper block to these:

#tagline {
    color:#ffffff;
    font-size: 1.1em;
    font-weight:bold;
    text-align : center;
    vertical-align: middle;
    padding-top:50px;
    }

#logoWrapper{
    background-image:url(../edblogoback.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    height:250px;
    } 

Then add these two blocks at the bottom

#logo {
float:left;
padding-top:120px;
padding-left:50px;
}

#taglineWrapper {
float:right;
width:320px;
color:#FFFFFF;
} 

In your tpl_header.php change the blocks between <!--bof-branding display--> & <!--eof-branding display--> back to the default like this:

<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>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />

Then in catalog\includes\languages\english\yourtemplate\header.php

Change:

  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'); 

To:

  define('HEADER_ALT_TEXT', '');
  define('HEADER_SALES_TEXT', 'eDealbase Computer Hardware & Accessories');
  define('HEADER_LOGO_WIDTH', '271px');
  define('HEADER_LOGO_HEIGHT', '73px');
  define('HEADER_LOGO_IMAGE', 'edblogo.jpg'); 

And finally you will need these two images that need to go into catalog\includes\templates\yourtemplate\images




I think that will do it, post back when your done so I can check I didn't miss something

[edealbase]

Umm that sounds alot more complex than i expected. I mean am i setting the backround colour to the same as i have in the lgo, then moving the tagline to say edealbase computer hardware etc

then adding a smaller croped image ontop of the backround colour to create the impression its all one logo? Thats a little to complex imo, im sure others wouldnt go through all that trouble to add a logo.

what if i changed the page with to like 900px then then made the logo 900Px or would that not work? i probally wont be able to get the fade from blue to white using your method.

Mabye a complete re think is in order, which is a shame because i like my logo, is there any software i can download which will show me quickly what my changes look like before i upload them to the server?

[RuFuS]

Those changes will make your logo look exactly as it does now??

To explain a little further...

The logo is replaced with the one I provided, it is then positioned using css to be in the same place as it is now.

The strip image I provided is then loaded as a background image and repeated horizontally behind the logo to create the same look you have now.

Yes the text "eDealbase Computer Hardware & Accessories" has been taken out of the images and applied as the tagline. Remember search engines can't read images.

and thats it?

[edealbase]

I guess you are right, im actually at work so ill have a go on my way home. I guess ill have to make a smaller strip of the backround to be repeated.

I'll have a go like i said, hope i dont make an

[RuFuS]

I guess you are right, im actually at work so ill have a go on my way home. I guess ill have to make a smaller strip of the backround to be repeated.

Or you cold use the images above, by right clicking on them and selecting "save image as"

I'll have a go like i said, hope i dont make an

Back up your tpl_header.php, header.php & css stylesheet and nothing can go wrong

[edealbase]

Mate i tried your suggestions and there not working. For example cant get the header image to load, the path is correct and matches the file name

the tagline writing is black and too big it wont go small.

the page stays at 100% even when i turn main wrapper to 80% here is some of the stylesheet

/*wrappers - page or section containers*/
#mainWrapper {
    background-color: #FFFFFF;
    text-align: left;
    width: 80% ; 
    vertical-align: top;
    border: 1px solid #9a9a9a;
    } 

#logoWrapper{
    background-image: url(../images/logo_tile_back.jpg);
    background-repeat: repeat-x;
    background-color: #ededed;
    height:250px;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 
#navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }
    
#tagline {
    color:#ffffff;
                  font-size: 0.2em;
                  font-weight:normal;
                  text-align : center;
                  vertical-align: middle;
                  padding-top:50px;

    }

#logo {
              float:left;
              padding-top:120px;
              padding-left:50px;
             }

#taglineWrapper {
             float:right;
             width:320px;
             color:#ededed;
              } 

I made some changes to what you said only because yours made the layout how it is now, my changes havent effected the layout at all.

Its doing my head in changing the stylesheet isnt doing anything.

[edealbase]

Anyone got any ideas? the stylesheet isnt making any of the changes i asked?