X-Cart forums

[WSUSA]

I have a custom 2-column template. In my altskin.css file I have the following line.

.fancycat-page-subskin-c #center-main {
margin-left: 250px;


On the cart / checkout pages of Fast_Lane_Checkout there is a margin of 250px, how do I eliminate this space on cart / checkout pages and keep the rest of the store that has the left menu with this spacing?

[totaltec]

When asking design questions like this, I can help more if there is a link to the page with the issue.

Look at the page in chrome, right click on the area and select inspect element. That should let you see everything that is affecting that area.

If the adjustment you are making, is working to fix the issue, but is affecting other areas as well, than you can assign a wrapper div to that section, so as to customize it individually.

For instance I have this html code:
<div class="mydiv">Some text</div>
I have this css:
.mydiv {
margin-left: 250px;
}

But I use mydiv in lots of different places, and I just want to change one instance of it. So I wrap it like this:
<div class="special"><div class="mydiv">Some text</div></div>
And I add this css:
.special .mydiv {
margin-left: 0px;
}

HTH

[WSUSA]

I have tried what you mentioned, and I still can't eliminate the space.

How can I separate the cart/checkout css from the store css?

Is there a way to simply put the left-bar or fancy-cat on the cart/checkout pages?

[totaltec]

The cart's CSS is usually already separated from the main one. Do you use one page checkout from x-cart, fast lane checkout, or some third party mod?

Like I said before it is so much easier to help when you provide a link to the site. Otherwise (for me at least) it is like guessing in the dark.

In response to your second question, yes you could put the left bar on the checkout page, but it is a less effective funnel imo. Once they are on the cart page we don't want to distract them.

[WSUSA]

http://www.totalvoicetech.com/store/Shop-By-Product/

I am using "Fast Lane Checkout" .. If you "Add to Cart" you will see right away what I am talking about.

[cflsystems]

Change this
.fancycat-page-subskin-c #center-main {
margin-left: 250px;
}

to

.fancycat-page-subskin-c #center-main {
margin-left: 0;
}

Most likely in the fast lane css file

[WSUSA]

This is not in the Fast Lane Checkout CSS, so I added it, it did not change anything.

I can change it in the main.css and altskin.css and it makes the cart and checkout pages look fine, but the rest of the site, the center-main goes under and behind the categories.

[cflsystems]

Fast Lane Checkout by default (out of the box) takes the whole space, there are no columns, so I guess your custom skin is designed that way. Go back to the original you had, turn off the css speed up tool from admin general settings. Then use FF/Firebug to find out exactly where this class is defined and if it's used on the other pages as well. You may need to put in an if statement to load different css when cart pages so you can have this class load only then.

[totaltec]

This is defined in your css:

.flc-checkout-container {
    clear: both;
    padding-bottom: 30px;
    vertical-align: top;
    width: 100%;
}

But apparently not referenced in your tpl. I think Steve's solution with an if statement would be the easiest fix.
Replace: <div class="center-main">
With: <div class="center-main{if $main="cart"} flc-checkout-container{/if}">

Then adjust your css for .flc-checkout-container to suit your design.

Obviously you would need to test this throughout the checkout process and with different browsers, firebug shows the fix working in Moz on the first page of the cart. but I think you need to add a fixed width in order to suit your rounded corners styles.

[WSUSA]

Originally Posted by totaltec

This is defined in your css:

.flc-checkout-container {
    clear: both;
    padding-bottom: 30px;
    vertical-align: top;
    width: 100%;
}

But apparently not referenced in your tpl. I think Steve's solution with an if statement would be the easiest fix.
Replace: <div class="center-main">
With: <div class="center-main{if $main="cart"} flc-checkout-container{/if}">

Then adjust your css for .flc-checkout-container to suit your design.

Obviously you would need to test this throughout the checkout process and with different browsers, firebug shows the fix working in Moz on the first page of the cart. but I think you need to add a fixed width in order to suit your rounded corners styles.

If I do this, it turns the whole site into the "cart" page.. I have been trying everything, and no luck.