Shape 5

I am having trouble changing the logo in the eShopper template.

I downloaded the PSD file, which is 504 pixels x 120. I notice that the original 'eShopper' logo and the line 'December 2010 Joomla Template' extend to about half that width - to about pixel 250 from the left - then the rest is blank. But the file physical size is 504 pixels, so wanting my logo to be large, I placed it in the PSD, at nearly the entire 504 pixels wide. Turned off the eShopper & tag line layers, saved my image with the same image name, renamed the old image in my File Manager, and uploaded my logo image as s5_logo.png.

When I load my site, however, only half of my logo shows up. I'm guessing this is because I need to reset the number of columns taken  up by the logo, but I can not figure out which module the logo 'belongs to', or if it's even a module setting I need to be playing with. I have looked all over the Forums and elsewhere. Can you please help?

Screenshot attached, cropped so you can see my URL if you need to.. Thanks, - Sarah

Hello,

Please post a url to where this occurs.

Hi Mike, thanks - the URL (for now) is:

http://tofino.directrouter.com/~svendsen/

Hello,

You need to widen the width of your logo area. Adding the following to the bottom of template.css will do this:

#s5_logo {
width:420px;
}

Thank Mike, I actually figured it out, using Safari's Firebug extension; but instead of adding those lines to the bottom, I changed lines 371 & 379 in template.css, like this:

#s5_logo {
background:url(../images/s5_logo.png) no-repeat top left;
height:120px;
width:460px; << CHANGED NUMBER FROM 300 TO 460
cursor:pointer;
float:left;
}

.s5_logo_module {
background:none;
height:120px;
width:460px;  << DID THE SAME TO THE LOGO_MODULE CODE SO THEY MATCHED
cursor:pointer;
float:left;
}

...and it works great. It might be a good thing, if you're going to give people a PSD file for the logo that's around 500 pixels wide, to make the logo_module and logo code wide enough to match. Because when I saw the PSD file with all that lovely real estate to the right of the eShopper logo, I thought "Hey, I can make my logo wider than eShopper's! Cool!" - and I think a lot of people probably will think the same thing.

Of course, there's probably a good reason you didn't do it that way... anyhow, if anybody else has an issue with the logo cutting off, this is how I fixed it. 

If anyone else is going to try this, though: First I created a backups folder in my css folder, and backed up the original template.css to it, in case I messed it up irrevocably.

Thanks for your help, Mikek, as always! - Sarah

Hello,

I was in the same predicament so I followed your instructions to fit a larger logo in my eShopper site.

My logo is 174px hi, so I only tampered with the height attributes (changed them fro 120px to 174).

Everything works!, However, my Main Menu which is on top of the site, now floats higher.
I presume it is aligned to the top of the site rather that the middle of the empty space (or the logos' height).

How can I change it to float to the middle again?

Thanks,

Larry