How to change width of the page

[brimsjewelry]

Hi,

I think what I want to do is relatively simple, but I just dont know css at all. I want to widen the page to fill the screen with the side boxes flush up against the edge of the screen or maybe with a slight buffer. And I want the store logo centered on the page with the header equal to the logo width.

Can anyone help with this?

Thanks

jason

[gjh42]

Change width to 100% in stylesheet_new.php:

#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

Change width to 100% in stylesheet_original.php

.centershop {
	padding: 0px;
	margin: 0px auto;
	/*position: relative;*/
	text-align: left;
	width: 100% !important;
}

[brimsjewelry]

Great! THanks Glen.

Now however, my header is to the left. How can I make it centered?

Thanks

Jason

[gjh42]

I haven't been able to make it center using Edit CSS in the Web Developer.

The old version of Zen Cart you are using has two main stylesheets, and the logo area is largely controlled by stylesheet_original and the table code so that there are few good handles to grab. You will probably need to adjust a tag in the code, though I don't have a copy of that version to tell you where to adjust it.

Using Firebug, I got the logo to center by adjusting the output HTML to look like this:

        <table class="header" border="0" cellpadding="0" cellspacing="0" width="100&#37;">
          <tbody><tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
            <td height="70" valign="middle" align="center"  width="100%">
<a href="http://abcjewelrydepot.com/index.php?main_page=index"><img src="includes/templates/template_default/images/logo.gif" alt="ABC Jewelry Depot [home link]" title=" ABC Jewelry Depot [home link] " height="110" width="550"></a>            </td>
            <!-- <td align="center" valign="top">
<h1></h1>            </td> -->
          </tr>
        </tbody></table>

Comment out the cell with the unused <h1>.
Make the link cell align="center" and width="100%".

It would be much easier to style this with the current version of ZC.

[wolftone]

I have tried the same thing with the CSS template I am using but it isn't working. Can someone please take a look for me.

http://torque.heritagewebdesign.com/~bali23/cart/

My CSS is as follows

body {
margin: 0;
background-image: url(../images/bkground.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
float: left;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #F9F9F9;
background-color: #010602;
}

#mainWrapper {
background-color: transparent;
text-align: left;
width: 100%;
vertical-align: top;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}


a img {border: none; }

a:link {
color: #22466E;
text-decoration: none;
}


a:visited {
color: #172F4B;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navCatTabs ul li a:hover {
color: #B42F02;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}

FORM, SELECT, INPUT {
font-size: 1em;
margin: 0.1em;
}

TEXTAREA {
float: left;
margin: auto;
display: block;
}

input:focus, select:focus, textarea:focus {
background: #FFFFFE;
}

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #CCCCCC;
}

LEGEND {
font-weight: bold;
padding: 0.3em;
}

LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

LABEL.inputLabel {
width: 9em;
float: left;
}

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 11em;
float: left;
}

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #CCCCCC;
}

/*warnings, errors, and messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #9a9a9a;
}

.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess {
background-color: #AAFFAA;
color: #000000;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/*wrappers - page or section containers*/

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
width:100%;
}

#logoWrapper{
/*background-image: url(../images/header_bg.jpg);*/
background-repeat: repeat-x;
background-color: #FFFFFE;
height:75px;
width:100%;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
width:100%;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
width:100%;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #CCCCCC;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #FFFFFE;
padding: 0.5em 0.2em;
font-weight: bold;
color: #000000;
width: 100%;
}

#navSuppWrapper {
margin: 0px;
background-color: transparent;
padding: 0;
font-weight: bold;
color: #000000;
width: 100%;
}

#navCatTabsWrapper {
background-color: #faffff;
color: #9a9a9a;
background-image:none;
width: 100%;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #D5D8DB;
white-space: nowrap;
}
#navMain ul li a:visited, #navSupp ul li a:visited, #navCatTabs ul li a:visited {
color: #C8CFD6;
}
#navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #B42F04;
}

#navSupp ul li a {color: #526B87;}
#navSupp ul li a:visited {color: #829BA7;}
#navSupp ul li a:hover {color: #B42F00;}


#navCatTabs ul li a {
color: #9a9a9a;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
border: 1px solid #CCCCCC;
width: 100%;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
}

#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #FFFFFF;
font-size: 0.95em;
/*font-weight: bold;*/
margin: 0em;
}

#navEZPagesTop {
background-color: #627B97;
/*background-image: url(../images/tile_back.gif);*/
font-size: 0.95em;
/*font-weight: bold;*/
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
width: 100%;
}

#productDescription, .shippingEstimatorWrapper {
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #CCCCCC;
padding: 1em;
}

.tableHeading TH {
border-bottom: 1px solid #CCCCCC;
}
.cartQuantity { border-left: 1px solid #CCCCCC; }
.cartRemoveItemDisplay { border-right: 1px solid #CCCCCC; }

.tableHeading, #cartSubTotal {
background-color: #C6C6C6;
}

#cartSubTotal {
border-top: 1px solid #CCCCCC;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
/*color: #33CC33;*/
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartOldItem {
/*color: #660099;*/
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

.cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #FFFFFE;
border: 1px solid #003D00;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
width: 100%;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
width: 100%;
}

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {
margin: 0.5em 1em;
}

/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

.centerBoxWrapper {
border: 1px solid #CCCCCC;
margin: 1.1em 0;
height: 1%;/* This is a workaround for an annoying IE bug, involving borders and float:left. */
width: 100%;
}

h2.centerBoxHeading {
font-size: 1.3em;
color: #FFF1F1;
}

/*sideboxes*/
.columnLeft, .columnRight {
padding-bottom: 10px;
}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #000000;
}
/*#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 1em;
color: #000000;
}*/

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FEFFFF;
/*background-image: url(../images/tile_back.gif);*/
padding: 5px;
}

.centerBoxHeading { background-color: #627B97; }


.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
margin-top: 1.5em;
}

.sideBoxContent, #navEZPagesTop {
background-color: #627B97;
color: #FAFBFC;
}

.sideBoxContent {padding: 3px 5px;}

.sideBoxContent a {
color: #D5D8DB;
}
.sideBoxContent a:visited {
color: #C8CFD6;
}
.sideBoxContent a:hover {
color: #B42F04;
}

#navEZPagesTOC ul li a, #navEZPagesTop a {
color: #D5D8DB;
text-decoration: none;
}
#navEZPagesTOC ul li a:visited, #navEZPagesTop a:visited {
color: #C8CFD6;
text-decoration: none;
}
#navEZPagesTOC ul li a:hover , #navEZPagesTop a:hover {
color: #B42F04;
text-decoration: none;
}


h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #B42F02;
text-decoration: none;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #515151;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #0000CC;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
/*color: #008000;*/
text-decoration: none;
}
A.category-links, A.category-links:visited {
/*color: #004080;*/
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
/*color: #FF0000;*/
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

/*misc*/
.back {
float: left;
}

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #F0F0F0;
color: #103763;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
color: #103763;
height: 1.5em;
vertical-align: top;
}

.hiddenField {
display: none;
}
.visibleField {
display: inline;
}

CAPTION {
/*display: none;*/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

TR.tableHeading {
background-color: #627B97;
color: #FFF1F1;
height: 2em;
border: 1px solid #CCCCCC;
}


.productListing-rowheading {
background-color: #838383;
/*background-image: url(../images/tile_back.gif);*/
height: 2em;
color: #000000;
}

.productListing-data {
border-bottom: 1px solid #CCCCCC;
padding: 5px 3px;
}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #FFFFFE;
}

#loginboxContent {text-align:center;}

#loginboxContent ul {text-align:left;}


#storeFooter
{
/*background-image: url();
height:50px;*/
}

.login_input {width: 95%;}

/************************************** css buttons ********************************************/
/**
* CSS Buttons Stylesheet
*
* Thanks to paulm for much of the content of the CSS buttons code
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet_css_buttons.css 4567 2006-09-20 01:55:24Z birdbrain $
* jstephens changed for buttons, not just hover.
*/
.cssButton, .cssButtonPress {
display: block;
/*width : 20em;*/
background-color: #F4F4F4;
color : #000000;
border: 2px outset #F4F4F4;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
text-align:center;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
padding: 0px;
/*border-spacing: 1px;*/
/*margin-left: auto;
margin-right: auto;*/
/*display: block;*/
/*vertical-align: top;*/
/*line-height: 130%;*/
cursor: pointer;
}

.cssButton:hover, cssButtonPress:hover, .cssButtonHover {
color: #627B97;
}

.cssButtonPress {
border-style: inset;
}

input.cssButton, input.cssButtonPress {
display: inline;
}

.insideButton {
padding: 0.3em;
}

input.cssButton, input.cssButtonPress {
padding: 0em;
}



/* adding the styles below might be needed if the default button width is changed */
/* .button_continue_shopping, .button_shipping_estimator {width: 150px;} */
/*.small_delete, .button_prev, .button_next, .button_search {width: 7em;}
.button_sold_out_sm, .button_sold_out, .button_update_cart, .button_checkout, .button_login {width: 10em;}
.button_return_to_product_list, .button_add_selected {width: 22em;}
.button_in_cart{width: 19em;}
.button_submit {width: 18em;}*/
.button_update_cart {color: red;}
.button_update_cartHover {color: #003D00;}
/*.innerbox#headernavcenter .boxtext .button_search {display:inline;}*/

.optionName {width: 30%;}

#productAttributes .clearBoth {clear: left;}

[bogie]

True - I've tried to dig through the Big Black Book, and such, and I'm trying to widen the "classic" template a bit... or even make it variable. Any hints? Or even what to search for? I'm starting to dig this but still going a bit nuts...

[Dinnages]

Change width to 100% in stylesheet_new.php:

#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 100%;
    vertical-align: top;
    }

Change width to 100% in stylesheet_original.php

.centershop {
    padding: 0px;
    margin: 0px auto;
    /*position: relative;*/
    text-align: left;
    width: 100% !important;
}

I have not followed thread & topic well, I find I have this in my stylesheet;
/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffcc;
text-align: left;
width: 100%; /* <-------------- change to 100%; or 750px or 974px */
vertical-align: top;
border: 1px solid #ffffcc;
}
Yet I STILL have the right column overlapping or is it the centre section MainWrapper flowing under the right boxes, therefore you cannot read all the contact_us page or some of those requiring an entry.
All the product pages dont appear to have a problem. Been round this issue since the install way back last year, & still causes me headache!
Looked though all the forum searches with similar queries & the book.
Otherwise think Ive mastered most of the customisation of it but for a nice header.

[gjh42]

These pages all work in Firefox at any window size; the contact page doesn't work in IE6 at any size.

This indicates that you have a CSS quirk that is misinterpreted by IE.

[Dinnages]

Thanks Glenn for that look & comment, so its not that simple then.
I have always tested out my pages in IE first, as loking on tracking thats so much in the majority, & then worry about the others after that.
So in this case its the other way round.
But the css stylesheet cannot be any different from the original on its upgrade to 1.3.7 all I have changed is text within pages as Im not that familiar yet with css, however fine with coding pages on the fly before getting into zen-cart.

So whats my next possible direction for a remedy?

[gjh42]

Firefox is one of the most standards-compliant browsers around, and IE is the least compliant, and about the buggiest, so the standard advice is to develop in Firefox and then fix any problems that show up in IE.