Zen Cart Logo
Forums / Setting Up Categories, Products, Attributes / Position of Additional Images

Position of Additional Images

Locked

Views: 1,266

Results 1 to 3 of 3
This thread is locked. New replies are disabled.
20 Apr 2008, 7:34 AM
#1
pdaparts avatar

pdaparts

New Zenner

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

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/shopping/index.php?main_page=product_info&cPath=6_8_9&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;
}

20 Apr 2008, 2:42 PM
#2
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,180
Plugin Contributions:
0

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
20 Apr 2008, 3:39 PM
#3
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,799
Plugin Contributions:
15

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.