Results 1 to 3 of 3
  1. #1
    Join Date
    Apr 2008
    Posts
    1
    Plugin Contributions
    0

    Default Position of Additional Images

    How to make additional images show up "inline" under the main product image.

    I am using version: 1.3.7.1
    Theme: ArkiTEC-HD Black

    this theme has a css file as shown below: do i need to add some code to it or tweak what is already in it?

    Here is a product page as it currently stands:
    http://cases-cradles-cables.com/shop...products_id=28

    see the images at the bottom? I'd like those to be inline under the main image and having the "enlarge" feature as the main image has.

    Here is the css code of my template: (thanks for all help I will receive).

    *BTW: i have read that I can go to another file and move a block of code up or to a different location and this should work. (it didn't). I tried it with: tell a friend and add to cart and swapped their position and no change showed up on the screen. Or, does it also require a css change?


    css code:

    /*
    // +----------------------------------------------------------------------+
    // |Zen-Cart Open Source E-commerce |
    // +----------------------------------------------------------------------+
    // | Copyright (c) 2007 Elite Integrity |
    // | |
    // | http://screen-wipes.co.uk |
    // | |
    // | Portions Copyright (c) 2006 Zen-Cart |
    // +----------------------------------------------------------------------+
    // $Id: stylesheet.css
    */

    body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    background-color: #ffffff;
    //background-image: url(../images/bg.gif);
    }

    .centershop {width: 100%}

    a img {border: none; }

    a:link, #navEZPagesTop a:link, #categoriesContent a:link, .sideBoxContent a:link, #navMain a:link, #informationContent a:link, #navSuppWrapper a:link, #siteinfoLegal a:link {
    color: #4682B4//#F1EDE7;//This is for an unvisited link...Set to black
    text-decoration: none;
    }

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

    a:visited, #navEZPagesTop a:visited, #categoriesContent a:visited, .sideBoxContent a:visited, #navMain a:visited, #informationContent a:visited, #navSuppWrapper a:visited, #siteinfoLegal a:visited {
    color: #4682B4;//#F1EDE7;
    text-decoration: none;
    }

    a:visited, #navEZPagesTOC ul li a:visited {
    color: #808080;
    text-decoration: none;
    }

    a:hover, #navEZPagesTop a:hover, #categoriesContent a:hover, #navMain a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover, .sideBoxContent a:hover, #informationContent a:hover, #navSuppWrapper a:hover, #siteinfoLegal a:hover {
    color: 000000;//#3B3B3B;
    text-decoration: none;
    }

    a:hover, #navEZPagesTOC ul li a:hover {
    color: #000000;//#AFC0CD;
    text-decoration: none;
    }

    a:active {
    color: #ffff00;//color: #0000FF;
    }

    h1 {
    font-size: 1.4em;
    font-family: georgia, tahoma;
    color: #000000;//#63859D;//ffffff
    }

    h2 {
    font-size: 1.3em;

    }

    h3 {
    font-size: 1.2em;

    }

    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: 10px;
    margin: 0.1em;
    }

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

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

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

    .hiddenField {display: none}

    .visibleField {display: inline}
    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;
    }

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

    #logo {
    float: left;
    padding-top: 0px;//17
    padding-left: 0px;//18
    }
    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 #9a9a9a;
    }

    /*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: #ffffff;
    text-align: center;//ezepages header links
    //font-size: 20px;
    color: #000000;
    width: 980px;
    vertical-align: top;
    }

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

    #logoWrapper {
    width: 100%;
    height:130px;
    //background-image: url(../images/header.gif);
    background-repeat: no-repeat;

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

    #tagline {
    color: #cccccc;//This is the color of header text
    //color:#cccccc;
    font-family: times new roman;
    font-size: 50px;
    font-weight: regular;
    text-align: center;

    padding: 20px;
    }

    #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 {
    background-image: url(../images/bar2.gif);
    background-repeat: repeat-x;
    font-weight: bold;
    font-size: 10px;
    height: 30px;
    color: #63859D;
    vertical-align: middle;
    padding-left: 3px;
    }
    #navCatTabsWrapper {
    margin: 0em;
    background-color: #ffffff;
    font-weight: bold;
    color: #63859D;
    height: 1%;
    width: 974px;
    border: 3px double #63859D;
    }

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

    #navSupp ul {
    margin: 0;
    font-size: 10px;
    text-align: center;
    }
    #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: #606060;
    }

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

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

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

    #navBreadCrumb, #navEZPagesTop {
    font-size: 0.95em;
    color: #606060;
    font-weight: bold;
    padding-top: 7px;
    padding-left: 5px;
    padding-bottom: 11px;
    }

    #navColumnOne {
    background-color: #63859D;
    //background-image: url(../images/bg.gif);
    }

    #navColumnTwo {
    background-color: #ffffff;
    //background-image: url(../images/bg.gif);
    }

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

    #catBoxDivider {
    color: #FFFFFF;
    width: 75%;
    text-align: center;
    }

    .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: 8px;
    }

    /*Shopping Cart Display*/
    #cartAdd {
    float: right;
    text-align: center;
    background-color: #ffffff;
    //background-image: url(../images/bg.gif);
    margin: 1em;
    border: 3px double #63859D;
    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: #0000ff;//#FFFF00;//cart writing...Black
    position: relative; /*do not remove-fixes stupid IEbug*/
    }

    .cartOldItem {
    color: #0000ff;//#E1D8C9;//cart writing...black
    position: relative; /*do not remove-fixes stupid IEbug*/
    }

    .cartBoxTotal {
    text-align: right;
    color: #00ff00;//#E4E4F1;//cart total..Green
    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: 2em 2em 2em 2em ;
    }

    .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, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
    font-size: 1.1em;
    color: #000000;
    }

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

    .leftBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-image:url(../images/box000.gif);
    background-repeat: no-repeat;
    padding: 20px;
    }

    .centerBoxHeading {
    font-size: 12px;
    background-image: url(../images/bar.gif);
    background-repeat: repeat-x;
    padding-top: 7px;
    padding-bottom: 13px;
    }

    .leftBoxContainer, .rightBoxContainer {
    background-image:url(../images/box001.gif);
    background-repeat: repeat-y;
    margin-top: 0px;
    }

    .sideBoxContent {
    background-image:url(../images/box002.gif);
    background-repeat: no-repeat;

    font-size: 11px;
    color: #cccccc;
    line-height: 125%;
    background-position:bottom;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 25px;
    }

    .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 {
    font-size: 11px;

    text-align: left;
    }

    h3.leftBoxContainer, #whatsnewHeading, #searchHeading, #recordcompaniesHeading, #searchContent, #featuredContent, #specialsHeading, #manufacturersHeading, #reviewsHeading, #featuredHeading, #musicgenresHeading, #currenciesHeading, #shoppingcartHeading {

    font-size: 11px;
    ;
    text-align: center;
    }

    .productListing-rowheading {
    font-size: 12px;

    background-image: url(../images/bar.gif);
    background-repeat: repeat-x;
    height: 30px;
    }

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

    /* footer
    --------------*/
    #navSupp {
    background-image: url('../images/bar2.gif');
    background-repeat: repeat-x;
    color: #606060;
    font-size: 8px;
    padding-top: 7px;
    height: 23px;
    }

    #siteinfoLegal, .legalCopyright {
    background-color: #000000;//63859D;
    font-size:10px;
    color: #ffffff;
    text-align: center;
    padding: 3px;
    }

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

    .forward {
    float: right;
    }

    .bold {
    font-weight: bold;
    }

    .rowOdd {
    background-color: #EFEBE2;
    height: 1.75em;
    vertical-align: top;
    }

    .rowEven {
    background-color: #DEE6EB;
    height: 1.75em;
    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
    }

    .tableHeading {
    background-color: #E1D8C9;
    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, #infoShoppingCart {
    background-color: #ffffff;
    }

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

    Default Re: Position of Additional Images

    Move Add to Cart Button
    1. includes/ templates/ templates/ tpl_product_info_display.php
    2. copy this .php file to your_template file, so we can edit this puppy
    3. includes/ templates/ override folder/ templates/ tpl_product_info_display.php
    4. line 88
    5. copy all of the text from: <!--bof Add to Cart Box--> to <!--eof Add to Cart Box-->
    6. Cut & Paste to line 46
    A. the next line under <!--eof Main Product Image-->
    7. Save
    8. ftp back up on the server

    Now, Just shooting in the dark, before I see the Cart to Add moved to the proper postion.
    1. includes/ templates/ your_own_template/ css/ stylesheet.css
    2. Find this:
    3. #cartAdd {
      float: right;
    4. change the highlighted red text above to left
    Mark
    Hare Do

  3. #3
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,144
    Plugin Contributions
    11

    Default Re: Position of Additional Images

    If you plan on continuing with PayPal, you need to upgrade your site to the current version of Zen.
    Since you have the override system in place, it should be a relatively easy process. It will also open up your possibilities with PayPal.

 

 

Similar Threads

  1. v150 Additional Images position over Add To Cart
    By gcopping in forum Setting Up Categories, Products, Attributes
    Replies: 9
    Last Post: 18 Apr 2012, 04:37 PM
  2. additional images link area and position
    By fw541c in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 2 Oct 2010, 11:58 PM
  3. Additional Image Icon Position
    By dgent in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 20 Apr 2010, 01:26 AM
  4. change additional images position
    By melena in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 26 Sep 2008, 06:12 AM
  5. Change position of additional image.
    By da_bsg in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 2 Jan 2007, 04:46 AM

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