Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How to change width of the page

How to change width of the page

Locked

Views: 5,817

Results 1 to 20 of 22
This thread is locked. New replies are disabled.
26 Sep 2007, 5:09 AM
#1
brimsjewelry avatar

brimsjewelry

Zen Follower

Join Date:
May 2006
Posts:
188
Plugin Contributions:
0

How to change width of the page

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

26 Sep 2007, 7:32 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

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;
}
26 Sep 2007, 6:06 PM
#3
brimsjewelry avatar

brimsjewelry

Zen Follower

Join Date:
May 2006
Posts:
188
Plugin Contributions:
0

Re: How to change width of the page

Great! THanks Glen.

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

Thanks

Jason

26 Sep 2007, 7:28 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

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:```html
<table class="header" border="0" cellpadding="0" cellspacing="0" width="100%">
<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.

28 Feb 2008, 3:42 PM
#5
wolftone avatar

wolftone

New Zenner

Join Date:
Jul 2006
Posts:
13
Plugin Contributions:
0

Re: How to change width of the page

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;}

3 Mar 2008, 6:29 AM
#6
bogie avatar

bogie

Zen Follower

Join Date:
Feb 2008
Posts:
132
Plugin Contributions:
0

Re: How to change width of the page

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

3 Mar 2008, 6:38 AM
#7
bogie avatar

bogie

Zen Follower

Join Date:
Feb 2008
Posts:
132
Plugin Contributions:
0

Re: How to change width of the page

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!

3 Mar 2008, 4:00 PM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

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

3 Mar 2008, 4:06 PM
#9
bogie avatar

bogie

Zen Follower

Join Date:
Feb 2008
Posts:
132
Plugin Contributions:
0

Re: How to change width of the page

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;
}

3 Mar 2008, 4:17 PM
#10
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

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?

3 Mar 2008, 4:57 PM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

Found your site link in another thread - your stylesheet shows that you copied the

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

incorrectly, with parentheses () instead of curly braces {}, so that declaration and the following one were being ignored.

3 Mar 2008, 5:01 PM
#12
bogie avatar

bogie

Zen Follower

Join Date:
Feb 2008
Posts:
132
Plugin Contributions:
0

Re: How to change width of the page

It be ugly...

http://www.stickertramp.com/zencart/index.php?main_page=index&cPath=65_67

Width is doing somewhat okay, just having probs with space between prods and trying to get a credit card set up... A lot of my users just flat out refuse to check otu with paypal...

5 Mar 2008, 9:50 PM
#13
nutty avatar

nutty

New Zenner

Join Date:
Mar 2008
Posts:
1
Plugin Contributions:
0

Re: How to change width of the page

HOW TO CHANGE WIDTH OF CENTRAL BOX (if i remove side boxes?)???:blush:

6 Mar 2008, 3:32 PM
#14
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

If you actually remove the sidebars by setting Configuration > Layout Settings > Column Left/Right Status - Global to 0, the center column will automatically fill the whole width of the mainWrapper.

7 Mar 2008, 2:12 AM
#15
bogie avatar

bogie

Zen Follower

Join Date:
Feb 2008
Posts:
132
Plugin Contributions:
0

Re: How to change width of the page

Bogie NEED new glasses...

At least I'm not as bad off as a friend, who was avoiding wearing his one evening (so as not to appear "old"). So we closed down a downtown club, and hit a diner to put a roof on the evening. And we're sitting at the counter, and several folks come in and sit at the other other end... Now, my bud was a bit "toastier" than I was... He promptly falls in love with on of them, and starts to proclaim it loudly... I finally got his attention, and explained that the "lady" looked nice from a distance, but that she needed a shave, and had an adam's apple... Glasses are good.

7 Mar 2008, 2:21 AM
#16
bogie avatar

bogie

Zen Follower

Join Date:
Feb 2008
Posts:
132
Plugin Contributions:
0

Re: How to change width of the page

Thanks guys! Worked nice, looks nice!

13 Apr 2008, 10:07 PM
#17
dinnages avatar

dinnages

Zen Follower

Join Date:
May 2007
Location:
Brighton/Hove/Sussex
Posts:
146
Plugin Contributions:
0

Re: How to change width of the page

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;
}

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.

14 Apr 2008, 12:27 AM
#18
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

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.

14 Apr 2008, 6:54 AM
#19
dinnages avatar

dinnages

Zen Follower

Join Date:
May 2007
Location:
Brighton/Hove/Sussex
Posts:
146
Plugin Contributions:
0

Re: How to change width of the page

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?

14 Apr 2008, 2:52 PM
#20
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to change width of the page

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.