X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   4.2 column width (https://forum.x-cart.com/showthread.php?t=44939)

GreatLakesVacuum 01-20-2009 07:39 AM

4.2 column width
 
How do I change the left column width and move some stuff from the right to the left column?

All the information on here I can find shows width values in home.tpl but there are none in my 4.2 install :(

balinor 01-20-2009 09:11 AM

Re: 4.2 column width
 
Please don't post questions in the bugs forum, it is for bugs and bug fixes only. Moving to Template Editing.

4.2 is css based, meaning all of the width values and everything else are in the stylesheet, main.css. Any posts on 4.1 won't help you as this is a completely different layout. Find the class that controls the side menu, and then go into your stylesheet and edit it. This looks like it:

#left-bar {
float: left;
position: relative;
width: 150px;
margin-left: 7px;
}

GreatLakesVacuum 01-20-2009 09:14 AM

Re: 4.2 column width
 
Hmm, sorry about the wrong forum thing, didn't mean to do that.

Anyways, I am trying to edit main.css and main.css in fancycategories/icons/ to get my categories list in the left column wider but its not working

I changed both values as high as 180px to test and its still showing only 137px wide (i measured it).

So I don't even think its using the main.css code block you posted because of fancy categories... but it seems to ignore changes I make to all the skin pages...

balinor 01-20-2009 09:16 AM

Re: 4.2 column width
 
Did you adjust the middle column's width to account for the new width you set on the left?

GreatLakesVacuum 01-20-2009 09:18 AM

Re: 4.2 column width
 
Quote:

Originally Posted by balinor
Did you adjust the middle column's width to account for the new width you set on the left?


Good question... I am looking at the file and do not see the main column's width defined anywhere. Just various containers which one even has a width of 200% however that works?!

balinor 01-20-2009 09:20 AM

Re: 4.2 column width
 
Here's a trick, use Firebug to determine exactly which class controls each:

https://addons.mozilla.org/firefox/addon/1843

GreatLakesVacuum 01-20-2009 09:25 AM

Re: 4.2 column width
 
Quote:

Originally Posted by balinor
Here's a trick, use Firebug to determine exactly which class controls each:

https://addons.mozilla.org/firefox/addon/1843


Installed it, its pretty neat (way over my head, but neat) I figured out what you mean though about using it to see what each section is called and broken down into.

However I am still at a loss, is ALL of this coming from main.css?

I made some other changes to customer/home.tpl and those changes never worked either. I just tried to comment out some sections I didn't want like the "special" section...

So I am really wondering why no changes I make to anything in my skin1_original folder show up...

balinor 01-20-2009 09:27 AM

Re: 4.2 column width
 
That's because skin1_original is not the active skin folder, skin1 is :) Skin1_original is your backup in case you botch something up in skin1.

GreatLakesVacuum 01-20-2009 09:31 AM

Re: 4.2 column width
 
Oh son of a ... I see what it did ... skin1 was empty, but I never copied it back from the server!!!!!!!!

Ok, let me do that and start over and I'll post back if I need help :)

GreatLakesVacuum 01-20-2009 09:37 AM

Re: 4.2 column width
 
Ok, so now if I am removing a part, would you suggest I comment it out of the .tpl file and then just addust the .css file for making layout changes?

I just want to make sure I am going at this the right way...

balinor 01-20-2009 09:39 AM

Re: 4.2 column width
 
Always safer to comment out - you may want/need it later. Just be sure to use smarty comments and not html comments. I.E.

{* Commented out code *}

GreatLakesVacuum 01-20-2009 10:16 AM

Re: 4.2 column width
 
Ryan,

Thank you so much for your help, I have a LOT of things working much better now.

However, I have some issues with widening my left column... what part of the "main column" am I suppossed to change? Right now my page is too wide for my screen because I increased the left column by 20px.

Also on fancy categories, the main.css is very hard to understand, what part do I change to make the "floating box" start the 20px further to the right?

EDIT: Fancy Cat problem solved, I figured it out :)

EDIT2: Ok that seemed to change problem #1 a bit ... now basically my "main column" text just starts too far to the left, the page no longer does not fit on the screen...

GreatLakesVacuum 01-20-2009 10:26 AM

Re: 4.2 column width
 
Haha, ok I need to try things before posting, *sigh* I fixed most of the problem, all works good except for the homepage where the speedbar goes too far to the right???

GreatLakesVacuum 01-20-2009 10:33 AM

Re: 4.2 column width
 
My speedbar was too long basically, by enlarging the width % in main.css it fits, but this made me decide to look at it on smaller monitors and it was bad, so I will change my mind about how to organize my info to use less buttons. :)

balinor 01-20-2009 10:36 AM

Re: 4.2 column width
 
Just remember, you can't really go any wider than 1000 so that the site fits without scrolling on a 1024x768 display. I usually recommend 975 just to give a little extra room in case they don't have the browser maximized, scrollbar, etc.

GreatLakesVacuum 01-20-2009 11:17 AM

Re: 4.2 column width
 
Yeah, that sounds about right.

I am still having some odd quirks with my page width though, its like it is too wide by the width of the scrollbar but only on the homepage and only until you click something??

If I have the right-bar completely turned off, should I set its width to 0px in main.css just to give the room up for everything else? What would you recommend?

GreatLakesVacuum 01-20-2009 11:23 AM

Re: 4.2 column width
 
Ugh it was the stupid #header .line1 .logo a img { width

I had redesigned my logo to allow the tabs to go above it so that I wouldn't cause ugly overlap issues on 1024x768, and had naturally changed the image width in the main.css to correspond to my new image size.

Are there any major drawbacks to removing the width tag? The page seems to look fine without it.

GreatLakesVacuum 01-20-2009 11:33 AM

Re: 4.2 column width
 
Fixed all above issues, but I have a new one...

My "line3" text ... which is the breadcrumbs I think, its not clickable, isn't it supposed to be?

balinor 01-20-2009 11:42 AM

Re: 4.2 column width
 
Make sure you didn't overlap the breadcrumbs with another <div>. That can happen if you increase the header div to be too large

GreatLakesVacuum 01-20-2009 11:51 AM

Re: 4.2 column width
 
Quote:

Originally Posted by balinor
Make sure you didn't overlap the breadcrumbs with another <div>. That can happen if you increase the header div to be too large


I had changed the .printable-bar top margin (increased it from 6px to 10px) but I put it back and that didn't fix it.

My new logo is 75px tall instead of 67 ... could that be the cause? I tried removing the height attribute of 75px from #header .line1 .logo a img but that didn't fix it either... perhaps the actual image is causing it?

What do you think?

EDIT: I changed the height attibute back to 67 (ruining my logo of course) as a test and it did not move anything up at all, so I think something else is causing it here...

GreatLakesVacuum 01-20-2009 11:57 AM

Re: 4.2 column width
 
Code:

#header .line1 {
    position: relative;
    height: 75px;
  direction: ltr;
}


Is causing it. I don't remember changing that value ... but I think I obviously need the 75px if my logo is that tall, what do I do to not overlap the breadcrumb?

GreatLakesVacuum 01-20-2009 12:15 PM

Re: 4.2 column width
 
Ok, so I trashed the height attribute on that too and then went to

#content-container { and changed the margin-top by 10px more and its all good now. I do have a bunch of blank space I really don't like but its good enough for now.

I think in a perfect world the printable page link should be on the same line as the breadcrumbs, that would look much better.


All times are GMT -8. The time now is 12:05 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.