Alternating between 2- and 3-column layouts

JJH1947 · #11 10-06-2005, 11:03 AM

YOu said: "2 totally different sets of html - one for the homepage solely, and then another with variations for all other pages" and "Not sure exactly what you're trying to accomplish."

(1) I am trying to have a home page that is different from the rest of the cart in terms of (a) what is displayed in the center section -- I have succeeded in this -- and (b) by being a fixed-width page--the _only_ fixed-width page in the cart.

(2) If having two differetn sets of html would solve (1)(b) above, then please provide advice on how to do this. If you can help me achieve a fixed-width home page in some other way, I am all ears!

Here is the current home page: http://www.bitsbytescomputer.com/store/customer/home.php

The content of the center section and the right hand column are both in one tpl that is called by an include statement from customer/main/welcome.tpl.

Thanks in advance for your help!

instinctual · #12 10-06-2005, 11:58 AM

sure, first you gotta consider though that rectangle_top.tpl and rectangle_bottom.tpl ultimately decide alot of things about the "outside" table of your entire catalog...so that said, usually what I do in order to have a completely custom homepage vs. the rest of the catalog site is I get rid of everything in rectangle_top.tpl and put in my own "header" code in that file - also eliminating everything in head.tpl or head_customer.tpl except for keeping track of necessary tags like the categories include, ,etc. that we may want to include in the design somewhere else.

Then, in those files, I use the tag I last mentioned {if $main eq "catalog" and $current_category.category eq ""} to provide a totally different "header" for if it's the homepage, and then in the rectangle_bottom.tpl I use that tag again to provide my "footer" for the homepage and non-homepage pages.

{if $main eq "catalog" and $current_category.category eq ""}
Homepage html code - beginning from just below the body tag in your template, down to where you want your content to show up.
{else}
regular site html - however you want that setup.
{/if}

Sometimes, it's necessary to alter the <body> tag as well per homepage or deeper page, and that can be done in the same manner in home.tpl, or by calling in a different .css depending on homepage or not.

Make sense?

JJH1947 · #13 10-06-2005, 12:39 PM

You said: "rectangle_top.tpl and rectangle_bottom.tpl ultimately decide alot of things about the "outside" table of your entire catalog"

My cart has been extensively modified so that changing the width statement in rectangle_top.tpl, for example, has no effect on the "customer side "my cart, though making a change to the width does affect the width of the admin side of the cart. I guess I will have to play around with the various tpls that control the width of the customer side of the cart and see if I can then figure out how to implement your sugestion

Thanks for your continued excellent help!

JJH1947 · #14 10-10-2005, 12:17 PM

Special thanks to Instinctual from Instinctual for providing code that enabled me to have my site switch between 3-column and 2-column modes and to Norma from Rightminddesigns for providing code that enabled me to have a fixed-width home page and variable width all other pages.

Both of you have been immensely helpful, as are the X-Cart forums in general.

You can see the almost-completely-tweaked results here: www.bitsbytescomputer.com/store

John

JJH1947 · #15 10-10-2005, 05:58 PM

If you wish to have your X-Cart alternate between a 2- and a 3-page layout, or if you wish to have a fixed-width home

page and variable width all other pages, here is the code that Instinctual of Instinctual and Norma of

Rightminddesigns so kindly provided. My cart has successfully been modified to do both of these things.

(1) How to have your X-Cart alternate between a 2- and a 3-page layout.

A. These instructions assume that you have your cart set up with a 3-column default layout.

B. Open customer/home.tpl. This should be the only file you have to modify.

C. Locate this comment: . This comment designates the beginning of what will be displayed in the

three columns that define your cart's layout.

D. Scroll down from there until you find this comment: . This comment designates the end of

what will be displayed in the center, or middle, column of your cart's layout.

E. Now look a few lines below that last comment. You are looking for a <TD> statement. This <TD> statement designates

the beginning of the third column of your cart's layout.

F. Immediately before that <TD> statement, insert this line of code

Code:

{if $main eq "catalog" and $current_category.category ne ""}

G. Now scroll down and find the ending </TD> statement.

H. Insert {/if} immediately below that </TD> statement.

I. The results (in my cart, at least):
1. Home Page = 3 cols.
2. Featured Product pages = 3 cols
3. Top level categories = 3 cols.
4. Secondary level categories = 3 cols.
5. Thumbnails = 3 cols.
6. Searches = 2 cols.
7. Product Details = 2 cols
8. All checkout pages = 2 cols.
9. And so forth.

J. Go here to see what this looks like in my cart: www.bitsbytescomputer.com/store

(2) How to have your cart display a fixed-width home page and variable width all other pages.

A. These instructions assume that you have your cart set up with a 3-column default layout.

B. Open customer/home.tpl. This should be the only file you have to modify.

C. Locate this comment: . This comment designates the beginning of what will be displayed in the

three columns that define your cart's layout.

D. Scroll down from there until you find this comment: . This comment designates the beginning

of what will be displayed in the center, or middle, column of your cart's layout.

E. Now look a few lines below that last comment. You are looking for a <TABLE> statement. This <TABLE> statement

designates the beginning of the second and third column of your cart's layout.

F. Modify this <TABLE> statement so that it looks like this:

<TABLE border="0"

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="650px" {else} width="100%" {/if}

cellpadding="0" cellspacing="0" class="twelvepoint">

G. Change the "650px" designation to whatever width you want your home page to be.

H. I also had to add this

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="650px" {else}

width="100%" {/if}

logic in two other locations in my customer/home.tpl and I created tables to contain the include

statements in these locations (changing the fixed width to 833px to make everything look right):

1. <TABLE border="0"

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="833px" {else} width="100%"

      {/if}

cellpadding="0" cellspacing="0" class="twelvepoint">
<TR>
<TD>
{include file="customer/logo_bar.tpl"}
{include file="customer/tab_bar.tpl"}
</TD>
</TR>
</TABLE>

2. <TABLE border="0"

Code:

{if $main eq "catalog" and $current_category.category eq ""} width="833px" {else}        

width="100%" {/if}

cellpadding="0" cellspacing="0" class="twelvepoint">
<TR>
<TD>
{include file="customer/bottom.tpl"}
</TD>
</TR>
</TABLE>

I. Go here to see what this looks like in my cart: www.bitsbytescomputer.com/store

Instinctual and Norma are far better qualified to explain the if...then logic than am I.