X-Cart forums

[rachelzhao]

Hi, I am new to the forum and X-cart. I am using the "stock" Book and Magazine skin template. I would like to do 2 things: resize the left column and add one more column on the right. Would someone please show me what file do I need to edit? Thanks in advance.


Jinji Zhao
X-cart 4.5.2
Book and Magazine skin template
EWDhosting.

[Toora Designs]

Use webmaster mode and Firebug to do this.

Left side bar's width can be added by edit the css file and you will editing #left-bar, .fancycat-page-subskin-c #left-bar

#left-bar, .fancycat-page-subskin-c #left-bar {
    margin-left: 29px;
    top: 29px;
    width: 250px; /*Change this*/
}

[rachelzhao]

Thanks Toora. I changed the left bar size to smaller and moved the center margin to the left. Now I need to add one column to the right, What file(s) do I need to modify to add a right bar (add one column to the right)? Please help.

[pauline]

Create new .tpl, use the left-bar.tpl and duplicate just call it right-bar.tpl.

(it will show exactly whats in the left-bar.tpl but you can add or remove whatever you need to show)

ftp to common_files/customer/right-bar.tpl

In content.tpl after

<div id="left-bar">
{include file="customer/right_bar.tpl"}
</div>
{/if}

ADD:

<div id="right-bar">
{include file="customer/right_bar.tpl"}
</div>
{/if}

ADD:

#right-bar, .fancycat-page-subskin-c #right-bar {
margin-left: 29px;
top: 29px;
width: 250px; /*Change this*/
}

To your CSS and play with the margins.

I think this is right, it's how I added a right bar myself and it worked okay, but i'm no expert

Pauline

[rachelzhao]

Hi Pauline
I did exactly what you said but it didn't show the right bar. Nothing change!. Do we miss anything else? Anything needs to be add to the home.tpl?

[pauline]

Hi,
I'm using 4.4.4 which doesn't include books and magazines, looking at the template I believe it should work if you open content.tpl and at the bottom of the file copy and paste below

{if ($main neq 'cart' or $cart_empty) and $main neq 'checkout'}
<div id="left-bar">{include file="customer/left_bar.tpl"}</div>
{/if}



{if ($main neq 'cart' or $cart_empty) and $main neq 'checkout'}
<div id="right-bar">{include file="customer/right_bar.tpl"}</div>
{/if}

in altskin.css below

#left-bar,
.fancycat-page-subskin-c #left-bar {
margin-left: 29px;
top: 29px;
width: 250px;
}

ADD

#right-bar,
.fancycat-page-subskin-c #right-bar {
margin-right: 29px;
top: 29px;
width: 250px;
}


Play with the margins.

Pauline.

[rachelzhao]

I just found that I have to Rem out this line: (approx line 940)

/* #right-bar {
display: none;
} * /

now i have right bar but overlaps on center

[pauline]

You need add and set the margin-left: ?px

also take a look at these vids, great when you're starting out,

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


all the best,
pauline