Forum Support

Shape 5
March 29, 2024, 08:55:21 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Logo "cut in half" - (& why does Eshopper logo take up half the PSD?)  (Read 761 times)
svendsens
Jr. Member
**
Offline Offline

Posts: 11



« on: June 21, 2011, 11:48:05 AM »

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
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: June 22, 2011, 07:32:58 AM »

Hello,

Please post a url to where this occurs.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
svendsens
Jr. Member
**
Offline Offline

Posts: 11



« Reply #2 on: June 22, 2011, 09:01:10 AM »

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

http://tofino.directrouter.com/~svendsen/
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: June 22, 2011, 09:37:13 AM »

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;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
svendsens
Jr. Member
**
Offline Offline

Posts: 11



« Reply #4 on: June 22, 2011, 11:15:21 AM »

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
« Last Edit: June 22, 2011, 11:17:00 AM by svendsens » Logged
frisbee
Jr. Member
**
Offline Offline

Posts: 20



« Reply #5 on: February 03, 2012, 08:30:52 AM »

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
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.