Problem with logo i uploaded

05 Nov 2007, 09:02

#1

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Problem with logo i uploaded

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%

05 Nov 2007, 12:28

#2

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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

Have you go a url I can look at?

05 Nov 2007, 13:09

#3

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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

05 Nov 2007, 14:29

#4

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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:
[PHP]#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;
}
[/PHP]

Then add these two blocks at the bottom
[PHP]#logo {
float:left;
padding-top:120px;
padding-left:50px;
}

#taglineWrapper {
float:right;
width:320px;
color:#FFFFFF;
}[/PHP]

In your tpl_header.php change the blocks between  &  back to the default like this:

[PHP]<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" />[/PHP]

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

Change:
[PHP] 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');[/PHP]

To:
[PHP] 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');[/PHP]

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

http://www.lifesapitch.co.uk/images/edblogo.jpg
http://www.lifesapitch.co.uk/images/edblogoback.jpg

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

05 Nov 2007, 15:35

#5

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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?

05 Nov 2007, 15:57

#6

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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?

05 Nov 2007, 16:35

#7

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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 :oops:

05 Nov 2007, 16:43

#8

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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.

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 :oops:

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

05 Nov 2007, 19:16

#9

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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

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

[PHP]#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;
} [/PHP]

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.

05 Nov 2007, 21:44

#10

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

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

05 Nov 2007, 22:40

#11

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

Why have you got two stylesheets now?

05 Nov 2007, 22:50

#12

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

I dont have two stylesheets.

i have only 1, what made you think i have two? I have a stylesheet2.css on the server for a backup.

05 Nov 2007, 23:00

#13

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

Actually i think the second stylesheet was effecting it. I took it out and most problems are fixed but the header isnt going the full way across the screen?

05 Nov 2007, 23:04

#14

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

Taken from source code
[PHP]<link rel="stylesheet" type="text/css" href="includes/templates/edealbase/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/edealbase/css/stylesheet2.css" />[/PHP]

Backup the second one locally not on the live server or it will still be used :blush:

This is why your css was not changing, as your changes in stylesheet.css were being overidden by stylesheet2.css

From what I can see you have made all the changes except the css, put those in and I will have another look

05 Nov 2007, 23:05

#15

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

:oops: Posted at the same time, looking now

05 Nov 2007, 23:07

#16

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

i dd make the changes, the backround image stopes and dosent repeat fully across the screen? the tagline writing appears to be white as i cant see it lol, so i think this is the last problem.

05 Nov 2007, 23:23

#17

edealbase

New Zenner

Join Date:: Nov 2007
Posts:: 35
Plugin Contributions:: 0

Re: Problem with logo i uploaded

hey mate i worked it out, i made some changes when i couldnt get the stylesheet to update, changes that you didnt tell me to make, this included adding the width 13px; to the logowrapper function, i got the idea to remove it and it worked a treat.

The page is displaying properly now.

cheers for all your help, i appreaciate it, infact ill prob be back to pick your brain on other things :)

Thanks

05 Nov 2007, 23:33

#18

rufus

Zen Follower

Join Date:: Sep 2007
Posts:: 214
Plugin Contributions:: 0

Re: Problem with logo i uploaded

One last thing, you really need to change the logo image to the .jpg, gif's do not have the same clarity thats why you can see it...

Ok two last things, there is a small amount of whitespace under the header now which can be removed by going to your tpl_header.php

and changing the:
[PHP]<br class="clearBoth" />[/PHP]
to
[PHP]<div class="clearBoth" />[/PHP]

Glad you got there in the end :lamo: