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...

[bogie]

Okayfine - I think I lucked into it - Is there an easy way to set "padding" between products? I've got short descriptions, and fairly large images now...

thanks!

[gjh42]

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

This bit copied from wolftone's stylesheet will help. You can increase the "5px" if you want more vertical separation, and change the border width/type/color if you want.

[bogie]

Tried that, no dice... Also tried another thing I saw... Here's the sectionish of code...

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

TR.tableHeading {
background-color: #cacaca;
height: 2em;
}

.productListing-data (
border-bottom: 3px solid #CCCCC;
padding:5px 5px
)

/* space & border between listing items */
.productListing-odd td, .productListing-even td {
text-align: left;
vertical-align: top;
padding:1em;
margin-bottom:1em;
border-bottom: 9px double #aaccbb; /*adjust to taste*/
}

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
height: 3em;
color: #FFFFFF;
}

[gjh42]

Wolftone:

You have stylesheet_customold.css in your /css/ folder, which is being loaded after stylesheet_custom.css and overriding any edits you make there. Delete the old copy, or save it somewhere outside of your Zen Cart structure.


Bogie:

That bit works in a fresh install, so you must have some custom code already in place that overrides it. Can you post a link to your site?