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