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)
-   -   Lucid (2 columns) width in 4.3 (https://forum.x-cart.com/showthread.php?t=51709)

acidon 01-11-2010 08:19 AM

Lucid (2 columns) width in 4.3
 
Hi everyone!

I am trying to set a fixed width 900px for my new 2-column lucid template, clean install.

Adding width: 900px; to page-container CSS did nothing :(

I tried to change width in both header and footer CSS from 100% to 900px, it adjusted their width correctly, however central part is still too wide.

Then I checked left-bar CSS and noticed it has a width set as 160px, however in reality it comes out at around 200px. I tried changing its width to something else yet it still stays at 200px :(


Anyone encountered similar obstacle?

gizmo 01-11-2010 08:36 AM

Re: Lucid (2 columns) width in 4.3
 
1 Attachment(s)
You Mean Like This:

http://forum.x-cart.com/attachment.php?attachmentid=1807&stc=1&d=126323119 3

/* page container */
#page-container {
min-height: 100%;
position: relative;
width:960px;
margin:0 auto;
}

/* page layout */
#content-container {
clear: both;
float: left;
overflow: hidden;
position: relative;
width: 960px;
padding-bottom: 39px;
margin-top: 140px;
background-color: #ffffff;
border-left: 1px solid #E8E8E8; border-right: 1px solid #E8E8E8;
}

#header {
height: 140px;
position: absolute !important;
top: 0px;
left: 0px;
width: 960px;
border-left: 1px solid #E8E8E8; border-right: 1px solid #E8E8E8;
background:#FFF;
}

#footer {
height: 39px;
width: 960px;
position: absolute !important;
bottom: 0;
overflow: hidden;
float: left;
}

also:
altskin.css


#page-container {
border: 0px none;
margin: 0px auto;
text-align: left;
width: 960px;
float: none;
}

I have main above is set 960 change that to your needs and everything centred.

gizmo 01-11-2010 08:42 AM

Re: Lucid (2 columns) width in 4.3
 
Forget to mention mine is 3 columns, But principal is the same with 2, for setting widths etc, just don't copy all my code as I have made custom edits to other areas.

I forgot this topic as well that may help > http://forum.x-cart.com/showthread.php?t=51504

gizmo 01-11-2010 08:43 AM

Re: Lucid (2 columns) width in 4.3
 
Quote:

Originally Posted by acidon
Hi everyone!

I am trying to set a fixed width 900px for my new 2-column lucid template, clean install.

Adding width: 900px; to page-container CSS did nothing :(

I tried to change width in both header and footer CSS from 100% to 900px, it adjusted their width correctly, however central part is still too wide.

Then I checked left-bar CSS and noticed it has a width set as 160px, however in reality it comes out at around 200px. I tried changing its width to something else yet it still stays at 200px :(


Anyone encountered similar obstacle?


also:
altskin.css


#page-container {
border: 0px none;
margin: 0px auto;
text-align: left;
width: 960px;
float: none;
}

acidon 01-11-2010 08:59 AM

Re: Lucid (2 columns) width in 4.3
 
Ok, I changed the width from 100% to 900px in content-container CSS and it fixed the width for whole site now.

However, I am still not able to adjust the width of left-bar CSS. Is this because of the width of the modules included in this div?

gizmo 01-11-2010 09:04 AM

Re: Lucid (2 columns) width in 4.3
 
altskin.css (line 36) #

#left-bar {
margin-left:0;
width:210px;
}

Also don't forget to check and edit, for IE > altskin.IE6/altskin.IE7 so that it's cross browser proof....
And check all areas of your site after final edits, as for me on 3 columns I had to do a few more tweaks here and there to be compatible with fixed width!

acidon 01-11-2010 09:47 AM

Re: Lucid (2 columns) width in 4.3
 
:-) Thx for quick replies , Gizmo, gonna check those in a bit :)

acidon 01-13-2010 11:57 AM

Re: Lucid (2 columns) width in 4.3
 
Ok everything is fine now, more info here:

http://forum.x-cart.com/showthread.php?t=51720


All times are GMT -8. The time now is 04:03 PM.

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