svendsens
Jr. Member
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
|
|
« 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
|
|
|
|
mikek
|
|
« 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
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
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
|
|
|
|
|