Results 1 to 7 of 7
  1. #1
    Join Date
    Nov 2008
    Location
    Orlando, FL
    Posts
    7
    Plugin Contributions
    0

    Default Changing the way products are displayed

    hello all,

    Is there a way to change the way products are displayed, what I mean is the picture is on the left and the description on the right of the picture along with the price and add to cart button.

    Is there a fix to have my products displayed with a picture and then a description underneath with the add to cart and price underneath that, or something like what I am talking about?

    any help would be appreciated thanks again

  2. #2
    Join Date
    Apr 2006
    Location
    Ohio
    Posts
    6,162
    Plugin Contributions
    0

    Default Re: Changing the way products are displayed

    Quote Originally Posted by CestProuve View Post
    hello all,

    Is there a way to change the way products are displayed, what I mean is the picture is on the left and the description on the right of the picture along with the price and add to cart button.

    Is there a fix to have my products displayed with a picture and then a description underneath with the add to cart and price underneath that, or something like what I am talking about?

    any help would be appreciated thanks again
    Ce,
    This will be controlled by the your_template/ stylesheet.css
    Post a link and I will see what we can do..
    I use Firefox Browser along with the free add on called Web Developer to easily control this procedure before I upload the .css to my site..
    Mark
    Hare Do

  3. #3
    Join Date
    Nov 2008
    Location
    Orlando, FL
    Posts
    7
    Plugin Contributions
    0

    Default Re: Changing the way products are displayed

    Quote Originally Posted by haredo View Post
    Ce,
    This will be controlled by the your_template/ stylesheet.css
    Post a link and I will see what we can do..
    I use Firefox Browser along with the free add on called Web Developer to easily control this procedure before I upload the .css to my site..
    Thanks Here is the css file, i tried to upload it and it said file was too large.

    /**
    * Main CSS Stylesheet
    *
    * @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 3215 2006-03-20 06:05:55Z birdbrain $
    */

    body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #3B3B39;
    background-color: #F5F5D6;
    }

    a img {border: none; }

    a:link, #navEZPagesTOC ul li a {
    color: #3B3B39;
    text-decoration: none;
    }

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

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

    a:active {
    color: #000000;
    }

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

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

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

    TEXTAREA {
    float: left;
    margin: auto;
    display: block;
    width: 95%;
    }

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

    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: 11em;
    float: left;
    }

    LABEL.inputLabelPayment {
    width: 15em;
    float: left;
    }

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

    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 #9A9C86;
    }

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

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

    .messageStackSuccess {
    background-color: #99FF99;
    color: #000000;
    }

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

    /*wrappers - page or section containers*/
    #mainWrapper {
    background-color: #f5f5d6;
    text-align: left;
    width: 100%;
    vertical-align: top;
    }

    #logoWrapper {
    background-color: transparent;
    height:144px;
    }

    #headerWrapper {
    background-image: url(../images/header_bg.gif);
    background-repeat: repeat-x;
    }

    #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0em;
    padding: 0em;
    }

    #navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    }

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

    #sendSpendWrapper {
    border: 1px solid #cacaca;
    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: #9A9C86;
    font-weight: bold;
    color: #ffffff;
    height: 1%;
    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;
    white-space: nowrap;
    }

    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #ffffff;
    }

    #navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    border: 1px solid #000000;
    }

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

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

    #navBreadCrumb {
    background-color: #f5f5d6;
    }

    #navEZPagesTop {
    background-color: #f5f5d6;
    }

    #navBreadCrumb, #navEZPagesTop {
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    padding: 0.5em;
    }

    #navColumnOne {
    background-color: #F5F5D6;
    background-image: url(../images/menu_bg.gif);
    background-repeat: repeat-y;
    }

    #navColumnTwo {
    background-color: #F5F5D6;
    background-image: url(../images/menu_bg.gif);
    background-repeat: repeat-y;
    }

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

    /*.content,*/ #productDescription, .shippingEstimatorWrapper {
    /*font-size: 1.2em;*/
    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 #000000;
    padding: 1em;
    }

    .tableHeading TH {
    border-bottom: 1px solid #cccccc;
    }

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

    #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: #606000;
    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;
    }
    .normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
    }

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

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

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

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

    /*sideboxes*/
    .columnLeft {}

    h3.leftBoxHeading, h3.leftBoxHeading a {
    font-size: 1em;
    color: #F5F5D6;
    }

    .leftBoxHeading, .centerBoxHeading {
    margin: 0em;
    background-color: transparent;
    padding: 0.5em 0.2em;
    }

    .leftBoxContainer {
    border-left: 1px solid #F5F5D6;
    border-right: 1px solid #F5F5D6;
    border-bottom: 1px solid #F5F5D6;
    }

    .sideBoxContent {
    background-color: transparent;
    padding: 0.4em;
    }

    h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 1.1em;
    color: #F5F5D6;
    }

    .rightBoxHeading {
    margin: 0em;
    background-color: transparent;
    padding: 0.2em 0em;
    }

    .rightBoxContainer {
    border-left: 1px solid #F5F5D6;
    border-right: 1px solid #F5F5D6;
    border-bottom: 1px solid #F5F5D6;
    }


    h3.leftBoxHeading a:hover {
    color: #FFFF33;
    text-decoration: none;
    }

    h3.rightBoxHeading a:hover {
    color: #606000;
    text-decoration: none;
    }

    .rightBoxContent {
    background-color: #000000;
    margin-bottom: 1em;
    }

    .centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #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: transparent;
    }

    #upProductsHeading {
    text-align: left;
    }

    #upDateHeading {
    text-align: right;
    }

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

    .forward {
    float: right;
    }

    .hiddenField {
    display: none;
    }

    .visibleField {
    display: inline;
    }

    .bold {
    font-weight: bold;
    }

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

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

    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: #cacaca;
    height: 2em;
    }

    #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 {
    background-color: #ffffff;
    }



    here is my ZC Cest Prouve

    Here is the website I want my products to look like This Page

    Thanks for the reply

    ciao

  4. #4
    Join Date
    Apr 2006
    Location
    Ohio
    Posts
    6,162
    Plugin Contributions
    0

    Default Re: Changing the way products are displayed

    Edit the stylesheet.css

    Add this to the bottom please

    #productMainImage {float: right;}
    Mark
    Hare Do

  5. #5
    Join Date
    Apr 2006
    Location
    Ohio
    Posts
    6,162
    Plugin Contributions
    0

    Default Re: Changing the way products are displayed

    Quote Originally Posted by haredo View Post
    Edit the stylesheet.css

    Add this to the bottom please

    #productMainImage {float: right;}
    After you finish with the above:
    Find this: #cartAdd Then highlight over the CartAdd with the following below and paste
    #cartAdd {
    float: left;
    text-align: center;
    margin: 6em 0em 0em .7em;
    border: 1px solid #000000;
    padding: 1em;
    }

    #productDetailsList {
    float: left;
    margin: 0em 0em 0em -12em;
    padding: 0em;
    }
    Mark
    Hare Do

  6. #6
    Join Date
    Nov 2008
    Location
    Orlando, FL
    Posts
    7
    Plugin Contributions
    0

    Default Re: Changing the way products are displayed

    Quote Originally Posted by haredo View Post
    Edit the stylesheet.css

    Add this to the bottom please

    #productMainImage {float: right;}
    ok Did that, now if you go HERE

    you will see the picture on the left, what I am trying to find out is how I can get the picture in collums say 1st line has 3 different products across.


    IE:

    Picture Picture Picture
    Description Description Description
    Qty Price Qty Price Qty Price
    Add to cart Add to cart Add to cart


    That format instead of the:

    IE:

    Picture Description Price Qty
    Add to cart

    Picture Description Price Qty
    Add to cart

    Picture Description Price Qty
    Add to cart

    ciao
    Jimmy

  7. #7
    Join Date
    Nov 2008
    Location
    Orlando, FL
    Posts
    7
    Plugin Contributions
    0

    Default Re: Changing the way products are displayed

    I would like my product listing to look somewhat like my "New Products" module

    and looking all over for how to do this

    ciao
    Jimmy

 

 

Similar Threads

  1. Change the way products are displayed on a category page
    By jmsnyder23 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 28 Apr 2014, 06:31 PM
  2. Change the way additional images are displayed
    By apriigem in forum General Questions
    Replies: 1
    Last Post: 29 Mar 2013, 10:23 PM
  3. Changing the way product info is displayed
    By pb4 in forum Templates, Stylesheets, Page Layout
    Replies: 16
    Last Post: 10 Feb 2010, 03:42 PM
  4. Changing the Way Products are Displayed
    By TurtleDove in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 24 Jun 2006, 05:04 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