Moving cart to footer

BBM_ · #1 08-10-2010, 09:55 PM

I've just started playing with X-Cart and I am attempting to move the mini cart to the footer of the website.

I have moved the code {include file="customer/menu_cart.tpl" } to under the footer in the home.tpl which works fine, however the cart is the full width of the page, how can i reduce it's width and possibility add another item done beside it?

Thanks

amy2203 · #2 08-10-2010, 10:36 PM

it will depend on your template, you could do this with CSS, use firefox and firebug to work out which element you need, and set it's width to 50% or so, and float perhaps depending on what you want next to it,

hth

BBM_ · #3 08-10-2010, 10:54 PM

Hi amy2203,

Many thanks for your help. I have tried playing with the "footer.box' settings in the CSS file and this only changes the footer below the line.

It seems the "footer" in home.tpl is controlled elsewhere, or I am simpy doing it wrong.

I have changed the footer.box width in main.css to 50% to illustrate the example and have attached a picture.

amy2203 · #4 08-10-2010, 11:07 PM

you'll probably need to edit the cart elements rather than the footer, maybe post your url so people can take a look,

BBM_ · #5 08-10-2010, 11:14 PM

Thanks again for your assistance, unfortunately my site is hosted on a isolated VM for testing. I'll keep poking around to try and figure it out.

cflsystems · #6 08-11-2010, 02:50 AM

Put the cart dialog in a div and give this div width - 200px or whatever works for you

BBM_ · #7 08-11-2010, 03:03 AM

Quote:

Originally Posted by cflsystems

Put the cart dialog in a div and give this div width - 200px or whatever works for you

You %$##^ legend! I have spent to long on this trying to figure it out.

If i can ask 1 more question, how can i line up 2 elements side by side (ie Cart and Help) as at the moment they are one under the other.

cflsystems · #8 08-11-2010, 03:06 AM

<div style="width:200px;float:left">CODE FOR CART DIALOG</div>
<div style="width:200px;float:left">CODE FOR HELP DIALOG</div>
<div class="clearing"></div>

Or you can even use table if you want to by putting each dialog in separate cell. Whichever works better for you.

BBM_ · #9 08-11-2010, 03:12 AM

Wow cflsystems,

I really appreciate your help on this. Looks like I need to brush up on my tables knowledge and formatting.

Thanks again, now to dig deeper into the code

cflsystems · #10 08-11-2010, 03:16 AM

No problem. If you use the divs put the inline styling in a css class and call the class in the divs. In main.css

.new_class_name {width:200px;float:left;}

and then
<div class="new_class_name">CODE FOR CART DIALOG</div>
<div class="new_class_name">CODE FOR HELP DIALOG</div>
<div class="clearing"></div>