X-Cart forums - Logo resize and 2 columns template

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! 8O

Code:

#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):

Code:

#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.

.

Code:

printable #header .line0 {

  height: 125px;  //Default 82px

}

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

Code:

.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? :mrgreen: