X-Cart forums

[buddy]

Hello,
i'm using 2 columns templates and i would want to resize the logo so i have modified

#header .line1 .logo a img {
width: 400px;
height: 80px;

in main.css

but nothing has happened. What's wrong? I'm using Firefox.

Thank you

[Onion Ninja]

There's probably another CSS statement controlling the logo size. I noticed that with Fashion Mosaic template.

It sounds like you might not be using Firebug. If you plan on doing more CSS play, u really need Firebug.

Hopefully you've figured it out by now If not, post back.

[buddy]

Hi,
thanks for your reply. I'm not using Fashion Mosaic template, but 2-columns.

I have installed Firebug but i can't modify logo and h1 tags.



I'm becaming crazy!

Thanks again

[ManFromDet]

If it's any consolation, give Firebug a chance... I'm using the same 2 column template as well. The more I play with it (Firebug), the more I'm finding it valuable. You can change things on the fly just to see changes in your cart without disrupting your source code. It's really a cool tool.

[buddy]

Hello,
i'm trying tu use Firebug...it's really an useful tool!!! I'm starting to find css elements i'm interested ))

Thanks to everyone!

[Onion Ninja]

Originally Posted by buddy

i can't modify logo and h1 tags.

If you still need a hand, let us know exactly what steps you are taking and where you get stuck.

[quote=buddy]I'm becaming crazy![/quote

Hahaha yeah I know what you mean

[peddler]

Alright, but sumbody needs to put some bubblegum on this thing and make it sticky.

First off, figure the difference in pixel size between your logo and the default xcart logo. Default xcart logo (xlogo.gif) = 203 x 48. I use one that measures: 456 x 104. My differences are 253 and 56.

Open the altskin.css and find the #Header section. Sit back, relax, you gonna be a while.

Here's what I changed and the new dimensions, with default dimensions shown as comments (eg //Default 74px). I didn't have to strictly adhere to adding ALL of my extra pixels, due to a bit of wiggle-room that exists with the original settings. You're gonna have to figure out just what needs to be added, then add some more, take out a bit, tweak it a little, change it some more, etc. This will just point you in the right direction. The next two days of tweaking is up to you!

#header {
  height: 125px; //default 107px
}

------------------------------------------
#footer {
  height: 99px;  //Default 74px - I also changed the footer size, which this setting and the next one deals with
}

.uo-container #footer {
  height: 130px;  //Default 107px - the Users Online footer
}
-----------------------------------------

#header .line0 {
  position: relative;
  height: 125px;  //default 107px
  direction: ltr;
}

#header .logo {
  position: absolute;
  top: 5px;    //default 28px - this set the 'gap' between browser window and top of logo image
  left: 0;
  height: 104px;  //default 67px
  margin: 0 !important;
}

#header .line1 {
  height: 30px;
  margin-left: 470px;  //default 250px
  width: auto;
}

#header .line2 {
  border: 1px solid #62a2fc;
  background: #62a2fc;
  margin-left: 470px;  //default 250px
  width: auto;
}

#header .line3 {
  height: 34px;
  margin-left: 470px;  //default 250px
  width: auto;
}

Next, you need to change the center section setting for margin-top otherwise your logo may overlap that section, referred to in the templates as content-container (it's above the Header section):

#content-container {
  padding-bottom: 99px;  //default 74px - this is another footer size change
  margin-top: 125px;  //Default 107px
}

Okay, all done. No.. sorry, just futzing with ya. You just changed the main page settings; you now have to deal with the other things that produce their own "main pages". Fun, ain't it?!

The Printable pages have their own Header settings.

.

printable #header .line0 {
  height: 125px;  //Default 82px
}

Now head out to the skin\common_files\css folder and open the main.css file.

.printable #content-container {
  position: static;
  padding: 0;
  margin-top: 125px;  //Default 82px
}

.printable #header {
  position: static;
  height: 125px;  //Default 82px - not sure if this is needed - depends upon browser - better safe than sorry
}

Okay, now you're done. Seriously. Unless I missed something, which is quite possible. The modules and maybe even some of the non-typical pages might just have a Gotcha waiting to happen. But with Firebug, and what you've learned tweaking all the above stuff, it'll all work out okay.

And ya gotta admit, this is all waaaaaaay more fun than just changing one image and one template like in the previous versions. Right?