Website from scratch

Hi, is it possible to make a site like this using zen cart?

http://www.phweb.biz/proofs/jewelrybyvictoria/template

As you can see, my borders on the left and right have shadings and they are images background. Is it possible to add some <div> to it? Another question is that how do I align the site to the middle, I just started studying the cart software.. here is the link:

http://www.wordfortheworldlp.org/zencart

Thank you and hope to get replies from you guys.

Forget about the center alignment, I have already aligned the site, I just want to know if it's possible to make image borders around the left and right side borders like this one :
http://www.wordfortheworldlp.org/zencart to be like
http://www.phweb.biz/proofs/jewelrybyvictoria/template

Thank you!

Yes, look at https://www.zen-cart.com :)

Yeah https://www.zen-cart.com has image border shadows but it's layout is set to table. Anyone know how to do it in CSS zen cart?

Fixed width or fluid?

Yes fixed width, I made the image border shadows in tables, I just don't know how to apply it in CSS and zen cart.

Take a look at my Test Site to see an implementation of what I believe you are trying to achieve.

This uses NO tables and is styled entirely with CSS.

requires adding an additional "wrapper" div.

I got your idea, so I will make another wrapper div for the shadow. I think I need to study more about using CSS without tables for websites. Thank you!

You said you already had your shadow image.

in your stylesheet create a new declaration:

#shadow {
margin: 0 70px; /* this is based on a page width of 850px so you'll have to adjust the 70px to fit your site */
background: url(../images/your_image.???);
}

Save the file and upload to your server.

Now in includes/templates/template_default/common/tpl_main_page.php

Find:

<div id="mainWrapper">

add the following:

<div id="shadow">
``` just above  so you'll now have the following:

Now find:

require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
</div>
<!--bof- parse time display -->

Add the closing </div> just above <!--bof- parse time display --> so you'll now have the following:

require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
</div>
</div>
<!--bof- parse time display -->

Save the edited file to:
includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php and upload to your server.

NB: to my above post - The instructions assume using only one image for the shadow.

Thank you for the info clydejones.

Ok i got the shadow border working. But there is 1 problem, the alignment of the whole body became left. I tried adding text-align: center to the css of #shadow and #mainWrapper but it's still the same. Here is the link:

http://www.wordfortheworldlp.org/zencart

Another question what if I make another border shadow on the footer area, is it still possible?

Ok i got it fixed but it's really weird. #shadow should be added to some group of #s like:

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper, #shadow{
margin: auto;
}

You left of the right and left margins. right now you have the margins set to 0.
add what is highlighted in the shadow declaration. You can adjust this as needed.

#shadow {
    width: 860px;
	margin: 0 70px;
    background: url(../images/bg_.gif);
    text-align: center;
    }

Another question what if I make another border shadow on the footer area, is it still possible?

Do you mean stopping the "main Shadow" above the bottom navigation bar and then adding a "footer Shadow"? Yes, this is possible. You'd just have to adjust where the "main shadow <div> closes and the "footer shadow <div> opens.

Do you mean stopping the "main Shadow" above the bottom navigation bar and then adding a "footer Shadow"? Yes, this is possible. You'd just have to adjust where the "main shadow <div> closes and the "footer shadow <div> opens.

Yes I got your point on that div closing. Thanks.