Results 1 to 3 of 3
  1. #1
    Join Date
    Nov 2005
    Posts
    62
    Plugin Contributions
    0

    Default Column Grid Layout on 1.3.7 (single column problem)

    I'm running Zen 1.3.7 (but it was an upgrade from 1.2.7 - I know this means issues), and I've installed the Column Grid layout mod.

    I've set the Product Layout to "columns", and the number of columns to "3", but I just get a vertical line of products down the side of the page, instead of a grid.

    (see in action here: http://www.siteground138.com/~themon...dex&cPath=3_33)

    The common solution for this problem that I found on these forums seems too be to add:
    Code:
    .categoryListBoxContents {
    	float: left;
    	}
    to the stylesheet.css, but that doesn't have any effect.

    To complicate matters, the template in use was made by someone else who is no longer available, and I'm not the greatest templater anyway (for my own site, I ended up paying a designer to create the Zen template, while I just did the backend), so I don't really have any clue what they have done with this template.

    Here is my stylesheet, if that helps:
    Code:
    /*
    //
    // +----------------------------------------------------------------------+
    // |zen-cart Open Source E-commerce                                       |
    // +----------------------------------------------------------------------+
    // | Copyright (c) 2003 The zen-cart developers                           |
    // |                                                                      |
    // | http://www.zen-cart.com/index.php                                    |
    // |                                                                      |
    // | Portions Copyright (c) 2003 osCommerce                               |
    // +----------------------------------------------------------------------+
    // | This source file is subject to version 2.0 of the GPL license,       |
    // | that is bundled with this package in the file LICENSE, and is        |
    // | available through the world-wide-web at the following url:           |
    // | http://www.zen-cart.com/license/2_0.txt.                             |
    // | If you did not receive a copy of the zen-cart license and are unable |
    // | to obtain it through the world-wide-web, please send a note to       |
    // | [email protected] so we can mail you a copy immediately.          |
    // +----------------------------------------------------------------------+
    // $Id: stylesheet.css 1223 2005-04-22 03:46:20Z ajeh $
    */
    BODY {
    	color: #000000;
    	margin: 5px;
    	margin-bottom: 10px;
    	padding: 0px;
       font: 11px Verdana, Arial, sans-serif;
       	background-image: url(/images/greengrass.jpg);
    
    }
    
    .centershop {
    	padding: 0px;
    	margin: 0px auto;
    	position: relative;
    	text-align: left;
    	width: 750px !important;
    }
    
    TD.main, P.main {
      font-size: 11px;
      line-height: 1.5;
    }
    A {
      color: #006600;
      text-decoration: none;
    }
    
    A:hover {
      color: #006600;
      text-decoration: none;
    }
    
    FORM {
    	display: inline;
    }
    .banners {
      padding: 15px;
    }
    
    /*HEADER CSS*/
    
    TABLE.header {
      background-color: #ffffff;
      border-right: 1px solid #9a9a9a;
      border-left: 1px solid #9a9a9a;
      border-bottom: 1px solid #9a9a9a;
    }
    
    TABLE.headerNavigation {
      background-color: #99CC33;
      border-right: 1px solid #9a9a9a;
      border-left: 1px solid #9a9a9a;
      border-bottom: 1px solid #9a9a9a;
      width: 100% !important;
    }
    
    TD.headerNavigation {
      position: relative;
      vertical-align: middle;
      font-family: Verdana, Arial, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color:#000000;
      letter-spacing:1px;
      padding: 5px;
    }
    
    TD.breadCrumb {
      font-size: 10px;
      font-weight: bold;
      color: #9a9a9a;
      padding: 3px;
    }
    
    TD.headerNavigation A, TD.headerNavigation A:visited, td.footertop a  {
      font-weight: bold;
      color: #ffffff;
    }
    
    TD.headerNavigation A:hover, td.footertop a:hover  {
      color: #99CC33;
    }
    
    TR.headerError {
      background: #ff0000;
    }
    
    TD.headerError {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
      background: #ff0000;
      color: #ffffff;
      font-weight : bold;
      text-align : center;
    }
    
    TR.headerInfo {
      background: #00ff00;
    }
    
    TD.headerInfo {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
      background: #00ff00;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
    }
    
    /*SIDEBOX CSS*/
    
    .column_left, .column_right, .column_single {
      background: #ffffff;
      padding: 2px;
    }
    
    .boxText {
      font-size: 11px;
      line-height: 125%;
    }
    .leftbox, .rightbox, .centerbox, .singlebox {
      font-family: Verdana, Arial, sans-serif;
      font-size: 11px;
      background: #ffffff;
      border: 1px solid #9a9a9a;
      margin-bottom: 15px;
    }
    
    .leftboxheading, .rightboxheading, .centerboxheading, .singleboxheading {
      background-color: #99CC33;
      font-size: 10px;
      font-weight: bold;
      color: #ffffff;
      padding: 3px;
      height: 20px;
      padding-left: 5px;
    }
    
    td.leftboxheading a, td.rightboxheading a, td.centerboxheading a, td.singleboxheading a {
      color: #ffffff;
    }
    TR.leftboxheading, TR.rightboxheading, TR.centerboxheading, TR.singleboxheading {
    }
    
    .leftboxcontent, .rightboxcontent, .centerboxcontent, .singleboxcontent {
      line-height: 125%;
      padding: 4px;
    }
    
    .leftboxfooter, .rightboxfooter, .centerboxfooter, .singleboxfooter {
      background-color: #99CC33;
      margin-bottom: 15px;
    }
    
    .plainBox, .plainbox-description {
      font-family: Verdana, Arial, sans-serif;
      font-size: 11px;
      background: #ffffff;
      border:1px solid #9a9a9a;
      padding: 5px;
    }
    .plainBoxHeading, TD.tableHeading {
      font-size: 12px;
      font-weight: bold;
      padding: 11px 5px 5px;
    }
    .productListing-heading {
      background-color: #99CC33;
      font-size: 10px;
      font-weight: bold;
      color: #ffffff;
      padding: 3px;
      height: 20px;
    }
    TD.productlisting {
      border:1px solid #9a9a9a;
    float: left;
    }
    
    TD.productListing-data {
      font-size: 10px;
      padding: 5px;
    }
    
    /*center main section
    -----------------------------------*/
    TD.pageHeading, DIV.pageHeading, h1 {
      font-size: 16px;
      font-weight: bold;
      color: #9a9a9a;
      padding-top: 11px;
    }
    
    .center_column {
      padding: 8px;
    }
    .main_page{
      width: 750px !important;
      background-color: #ffffff;
      border-right: 1px solid #9a9a9a;
      border-left: 1px solid #9a9a9a;
      border-bottom: 1px solid #9a9a9a;
      padding: 5px;
    }
    
    /* footer
    --------------*/
    
    TABLE.footer {
      background: #ffffff;
      text-align: center;
      font-size: 10px;
      border-right: 1px solid #9a9a9a;
      border-left: 1px solid #9a9a9a;
      border-bottom: 1px solid #9a9a9a;
    }
    
    TR.footertop {
      background: #99CC33;
      font-size: 11px;
    }
    
    TD.footertop, TD.footerbottom {
      padding: 5px;
    }
    
    /*miscellaneous areas
    -------------------------------------*/
    TD.cartBox {
       background: #eff4f8;
       font-size: 10px;
       padding: 3px;
       border: 1px dotted #ffb062;
    }
    
    TR.productListing-odd, TR.upcomingProducts-odd {
      background: #ffffff;
    }
    
    TR.productListing-even, TR.upcomingProducts-even, .productsNotifications {
      background: #eff4f8;
    }
    
    TD.productListing-data-description-odd {
      background: #ffffff;
      font-size: 10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid #9a9a9a;
    }
    
    TD.productListing-data-description-even {
      background: #eff4f8;
      font-size: 10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid #9a9a9a;
    }
    
    td.pageresults a {
      color: #428dff;
    }
    
    td.pageresults a:hover {
      background: #FFFF33;
    }
    
    SPAN.newItemInCart {
      color: #ff0000;
      font-weight: bold;
    }
    
    TD.smallText, SPAN.smallText, P.smallText, td.pageresults{
       font-size: 10px;
    }
    
    TD.fieldKey {
      font-size: 12px;
      font-weight: bold;
    }
    
    TD.fieldValue {
      font-size: 12px;
    }
    
    CHECKBOX, INPUT, RADIO, SELECT {
      font-size: 11px;
    }
    
    TEXTAREA {
      width: 100%;
      font-size: 11px;
    }
    
    .greetUser {
       color: #f0a480;
       font-weight: bold;
       font-size: 12px;
       padding-top: 5px;
       padding-bottom: 5px;
    }
    
    SPAN.greetUser {}
    
    SPAN.markProductOutOfStock {
    	color: #c76170;
    	font: bold 12px Verdana, Arial, sans-serif;
    }
    
    span.normalprice {
    	text-decoration: line-through;
    }
    
    SPAN.productSpecialPrice, SPAN.productSalePrice, .stockWarning, span.coming {
      color: #ff0000;
    }
    
    span.productSpecialPriceSale {
      color: #ff0000;
    	text-decoration: line-through;
    }
    
    SPAN.productPriceDiscount, .inputRequirement {
      font-size: 10px;
      color: #FF0000;
    }
    .moduleRow { }
    .moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
    .moduleRowSelected { background-color: #E9F4FC; }
    
    /* message box */
    
    .messageBox {}
    .messageStackError, .messageStackWarning, errorBox {
      background-color: #ff0000;
      color: #ffffff;
      font-size: 10px;
      padding: 4px;
      border: 1px solid #9a9a9a;
    }
    .messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }
    .messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffff00; }
    
    /* checkout totals */
    TD.ot-subtotal-Text, TD.ot-cod-fee-Text, TD.ot-total-Text, TD.ot-group-pricing-Text, TD.ot-gv-Text, TD.ot-loworderfee-Text, TD.ot-shipping-Text, TD.ot-subtotal-Text, TD.ot-tax-Text, TD.ot-coupon-Text {
      font-weight: bold;
    }
    TD.ot-subtotal-Amount, TD.ot-cod-fee-Amount, TD.ot-total-Amount, TD.ot-group-pricing-Amount, TD.ot-gv-Amount, TD.ot-loworderfee-Amount, TD.ot-shipping-Amount, TD.ot-subtotal-Amount, TD.ot-tax-Amount, TD.ot-coupon-Amount {}
    
    /* product_info attribute comments */
    
    .ProductInfoComments, TD.ProductInfoComments, SPAN.ProductInfoComments {
      color: #ff0000;
      font-size: 10px;
      text-align : left;
      font-weight: bold;
      padding-top: 6px;
      padding-bottom: 6px;
      border-top: 1px solid #9a9a9a;
    }
    
    /* General alert span class */
    TD.alert, SPAN.alert {
      color: #FF0000;
      font-weight: bold;
    }
    
    /* General alert span class */
    TD.alertBlack, SPAN.alertBlack {
      color: #000000;
      font-weight: bold;
    }
    
    /* popup tables */
    TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {
      background-color: #ffffff;
    	margin: 6px;
      padding: 6px;
      font: 11px Verdana, Arial, sans-serif;
    }
    
    /* categories_description */
    TABLE.categoriesdescription {
      font-family: Verdana, Arial, sans-serif;
      font-size: 11px;
      background: #D0D0D0;
      border:1px solid #9a9a9a;
    }
    
    TD.categoriesdescription {
      font-size: 11px;
      line-height: 1.0;
    }
    
    /* categories box parent and child categories and extra links */
    A.category-top, A.category-links {
      color: #006600;
      text-decoration: none;
    }
    A.category-subs, A.category-products {
      color: #428dff;
      text-decoration: none;
    }
    SPAN.category-subs-parent {
      font-weight: bold;
    }
    SPAN.category-subs-selected {
      font-weight: bold;
    }
    
    /* attribute images table */
    TABLE.products-attributes-images {
    /*  width: 100%; */
    /*  border: 1px solid #9a9a9a; */
      float: left;
      padding: 2px;
    }
    .unnamed1 {
    	background-image: url(images/purplecircleslight.gif);
    	background-position: -10px -10px;
    	position: absolute;
    	left: 10px;
    	top: 10px;
    	right: 10px;
    }
    .topnav {
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: solid;
    	border-left-style: none;
    	border-top-color: #336600;
    	border-right-color: #336600;
    	border-bottom-color: #336600;
    	border-left-color: #336600;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: x-large;
    }
    .leftBoxContainer {
    	border: 1px solid #ffffff;
    	margin-top: 1.5em;
    	}
    
    .sideBoxContent {
    	background-color: #ffffff;
    	padding: 0.4em;
    	}
    .categoryListBoxContents {
    	float: left;
    	}
    There are other issues with how the template displays, such as the background image not showing up at all, but I assume those are 1.2.7 -> 1.3.7 template issues, and may or may not have anything to do with my column/grid problem. I am trying to correct the other issues as well, but they are less important right now than getting the grid to work properly.

    I know it is installed properly, because I also installed it into the Classic template, and it works just fine in there, so I know it's an issue with my template somehow.

    Any suggestions?

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Column Grid Layout on 1.3.7 (single column problem)

    I know that this is not what you are wanting to hear but it is what it is ...

    You are using the stylesheet from an old version dated $Id: stylesheet.css 1223 2005-04-22

    This is full of tables that no longer exist as they have been converted to div's in the 1.3.x series

    You will have to rebuild your template using the correct stylesheet version
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Nov 2005
    Posts
    62
    Plugin Contributions
    0

    Default Re: Column Grid Layout on 1.3.7 (single column problem)

    Quote Originally Posted by kobra View Post
    I know that this is not what you are wanting to hear but it is what it is ...

    You are using the stylesheet from an old version dated $Id: stylesheet.css 1223 2005-04-22

    This is full of tables that no longer exist as they have been converted to div's in the 1.3.x series

    You will have to rebuild your template using the correct stylesheet version
    Thank you! Apparently, that was just what I needed to hear.
    I didn't want to mess with the template too much yet since I didn't know how much it would break the layout.
    But when you said that, I figured I'd give it a shot and see what happened. I replaced the custom (aka old) stylesheet.css with the default stylesheet.css that came with the Classic template in 1.3.7!
    Not only did it fix my column/grid problem, it didn't kill the look of the site nearly as much as I thought. Even I can make the needed changes to rebuild the template.

    So thank you, kobra, you have saved the day again! ;)

 

 

Similar Threads

  1. Column Layout Grid - Shows only 1 column?
    By Marv in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 20 Dec 2011, 03:36 PM
  2. [problem] Column Layout Grid
    By kitkitng in forum All Other Contributions/Addons
    Replies: 2
    Last Post: 8 Jun 2011, 01:01 PM
  3. Column / Grid Layout Problem
    By Andy Hillier in forum Addon Templates
    Replies: 18
    Last Post: 2 Feb 2010, 11:27 PM
  4. Column layout grid for product listing - one column only
    By london mummy in forum Templates, Stylesheets, Page Layout
    Replies: 15
    Last Post: 26 Oct 2009, 10:06 AM
  5. Column Layout Grid problem
    By djcaw57 in forum General Questions
    Replies: 2
    Last Post: 29 Sep 2008, 02:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR