can I widen my index page layout?

[asdco]

I would like to widen my index page to fill the screen from side to side keeping the left boxes but not the right. Is there a link for more info? or maybe someone knows that info?

[schoolboy]

Site width and column width, as well as column display/hide - are all a combination of settings in the ADMIN PANEL and settings in your CSS.

Additionally, page-specific column show/hide can be configured in a couple of PHP files, the most relevant of these being tpl_main_page.php.

GLOBAL column settings for show/hide are in ADMIN >>> CONFIGURATION >>> LAYOUT SETTINGS, as are pixel width for sidecolumns and sideboxes. Configure these first.

Setting the width to 100% (NOT a good idea in my opinion, and I'll say why later) is done in your stylesheet in the mainWrapper and possibly headerWrapper areas.

Depending on the TEMPLATE you are using, there may be other settings too. MANY COMMERCIAL TEMPLATES - such as those from Algozone and Template Monster - are hard-coded to FORCE a fixed layout, and no amount of conventional zencart setting will result in changes. If you paid for your template, then you are unlikely to get support for it here, and will have to direct questions to the person who sold it to you.

100% width has a negative effect on widescreen monitors, unless the 100% width has been specifically designed to cater for layout on widescreen.

Many people design their sites on SQUARE, or 4:3 aspect monitors, so they never see the effect on a widescreen display.

For eCommerce, this shound be a concern, because your single-minded objective is to make the visitor feel as COMFORTABLE as possible, and to make their shopping experience as EASY and as QUICK and as EFFICIENT as possible.

Sites that concertina over 100% width on a widescreen not only look bland and sparse on widescreens, but if the navigation elements are stretched apart, more "mouse effort" is required from the user.

This may sound dumb... but there is a LOT of research to support the ergonomics of good eComm site design, and small things like inconvenient scrolling and mouse moves can reduce sales by as much as 50% (through user irritation and abandoned carts).

This is why MOST good eComm sites use a fixed width - one that renders the site and its design EXACTLY THE SAME on every screen (or at least 95% of them).

Only a handful of the Guru sites (like Amazon) use 100% width, but they have extremely knowledgeable site designers controlling how the content it displayed.

If you really want 100% width then do it... but if you don't get important navigational and functional structures positioned conveniently for your visitors, you risk losing sales to people who view the site on a wide screen...

[asdco]

I fully understand what you're saying and I agree with making the customer happy but when I loaded zencart the wrapper already preinstalled at 100% and with my 22" screen the index and even the page we are on here at zen have huge gaps on each side making the index page look more comic bookish than a store. I've been to many store sites that fill my screen and are a lot more appealing so how do they fill the screen? I know you can detect a persons browser but can you also detect a persons monitor? and then adjust the index page to suit that persons particular monitor?

[asdco]

I just noticed while connecting to ebay that the window opens at about 800px then theres a slight hesitation and then the their store fills my screen so they must be detecting my resolution and adjusting their resolution to fit? would that be hard to incorporate into my zencart?

[asdco]

for anyone tackling the same problem you may want to read this as it "may" be the answer. I'm not a script writer by no means and I found this on the net. any input on whether it will work?

Dynamic Layout is a simple JavaScript library that allows you to easily adjust page layout based on the current browser width.

The script works by modifying the class property on the body element, adding a new class that will look something like bw-1000, where "1000" is one of the numbers in a predefined list of possible browser widths.

By default, the script uses three window sizes: 800px, 1000px, and 1200px. Dynamic layout chooses the largest possible size that fits within the window. If the window width is smaller than the smallest specified width, the bw-min value will be used as the class name.
Usage

You must first add the following line of code into your HTML file, right after the <body> tag:

<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js"
type="text/javascript"></script>

Important: Make sure you place this line of code right after the <body> tag, and not within the <head> tag, otherwise this script will not work (see below for an explanation why)

Note: You will almost certainly want to copy the script to your own server. If you do so, make sure to update the src property to point to your local copy of the script file

You can tell the script to use custom screen widths by setting the sizes query string property to a comma delimited list of numbers. For example, to set the window sizes to 600, 800, and 1200 you would use the following code:

<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js?sizes=600,800,1200"
type="text/javascript"></script>

You're now ready to write CSS rules that depend upon the screen size. To do so, make sure you use CSS selectors based on the browser width you're trying to target. Here's an example:

/* Default: Basic padding, no fixed size */
#content
{
padding: .5em;
}

/* 800px: Set content to 500px and center */
.bw-800 #content
{
margin: 0 auto; /* Center content */
width: 600px; /* Fixed width */
}

/* 1000px: Wider content, plus larger line-spacing */
.bw-1000 #content
{
margin: 0 auto; /* Center content */
width: 800px; /* Fixed width */
line-height: 2; /* Larger line spacing due to longer lines */
}

Tip: Note that, in the example above, we had to specify the margin property for both the 800px and 1000px cases. If you wish to share code between sizes, you must use the correct CSS selectors to do so.

[brandonturpin]

You can change the width of your page by editing the CSS in
includes > templates > YOUR_TEMPLATE > CSS > stylesheet.css

changing the following to desired width

#mainWrapper {
	background-color: #e9e9e9;
	text-align: left;
	width: 950px;
	vertical-align: top;
	}

To change the width of the side columns you can go into

Admin > Configuration > Layout Settings > Column Width - Left Boxes (set width)
Admin > Configuration > Layout Settings > Column Width - Left (set width)


Admin > Configuration > Layout Settings > Column Width - Right Boxes (set width)
Admin > Configuration > Layout Settings > Column Width - Right (set width)


If you want to remove one of the side boxes then just set the width to 5px (give some margin on the side) on both the Column Width - Left/Right Boxes and Column Width - Left/Right and make sure all the sideboxes on the corresponding side you are removing is disabled in

Admin > Tools > Layout Box Controller

I like to have my width around 950px depending on the site

[barco57]

If you want to remove one of the side boxes then just set the width to 5px (give some margin on the side) on both the Column Width - Left/Right Boxes and Column Width - Left/Right and make sure all the sideboxes on the corresponding side you are removing is disabled in

Why not just turn the column off? with the switch in the admin.....

[brandonturpin]

Why not just turn the column off? with the switch in the admin.....

Haha I guess that would make sense! :-)


Admin > Configuration > Layout Settings > Column Right Status - Global
Admin > Configuration > Layout Settings > Column Left Status - Global

Set to 0 for which you want to disable.

Thanks barco57

[asdco]

thank you for that information but after reading other links I realize that only fixes the screen for a specific monitor. I use a 22" wide screen so if I set it to look perfect on my screen and someone comes in with lets say a 15" laptop it'll be a mess for them. The script that I found seems pretty straight forward to adjust for a persons monitor but I'm not a script wiz and wouldn't really know how to install it correctly. I DO know a lot about business and If the store screen doesn't fit side to side on a customers monitor you may as well close the store because the store looks amateurish and you've lost the game before it ever began.

[barco57]

I DO know a lot about business and If the store screen doesn't fit side to side on a customers monitor you may as well close the store because the store looks amateurish and you've lost the game before it ever began.

here is a list of amateurish sites (according to you):
tigerdirect. com
walmart. com
target. com
victoriassecret. com
jcpenney. com
lowes. com
homedepot. com
bestbuy. com
landsend. com
basspro. com
staples. com
zales. com
officemax. com
subway. com
ebay. com

I think I made my point...

So whats the url to your 100% width site so we can see it on some huge monitors?