Help Need with Product Page Layout

Sorry Guys, I know I have been asking for alot of help but I am desperate to get my store going fast :(

anyone can advise me how can I layout my product page?

attached is the current layout and below is the layout I want it to be.

Cant seem to find a way to unwrap the description from the image as well..

this is getting hard... thanks for everyone's patience in advance :frusty:

http://i54.tinypic.com/2zg9ggk.jpg

Since we don't know what you've done template-wise, we'll need a link to the site rather than a screenshot.

I too would like a little help on Product Layout:lamo:

1.) How can I get my Product picture to show up ABOVE the Description ?
.....(instead of on the side of the Description)

2.) How do I get some Separation between Products listed ?
.....(my products are piled on top of each other like a stack of bricks)

That's it for now... :lookaroun
If I can learn how to do that...it would be a BIG improvement ! :P

The site I am working on is: www.jeepart.com/decals_stickers

THANKS for any help u can offer ! :yes:

Quote:

---

Originally Posted by stevesh

Since we don't know what you've done template-wise, we'll need a link to the site rather than a screenshot.

---

sorry i didnt supply enough information. I am using LiteBlue template

you can view my layout directly at

http://ihavebeenlookingforthis.com/i...&products_id=3

anyone can help me please

zoombie, very first thing.....open up includes/templates/lite_blue/templates/tpl_product_info_display.php and find this bock of code:

Code:

---

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

---

Right click and "cut" that whole block of code.


Now, find this line.......it will be above where you just cut:

Code:

---

<!--bof Main Product Image -->

---

Right click and "past" ABOVE this line, so it looks like:

Code:

---

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->
<!--bof Main Product Image -->

---

This will move your product names' div above the image div.

Then, add this to your stylesheet.css:

Code:

---

#productDescription {
  white-space: nowrap;
}

---

This will get you a good start to what you're wanting. Other things may have to be done after this is done, but like I said......this will get you a good start, anyway.

wow GetEmFast,

thanks for your detail help.

I tried what you have mentioned but still it doesnt seem to work...

below is my stylesheet.css

Quote:

---

/**
* Template designed by 12leaves.com
* 12leaves.com - Free ecommerce templates and design services
*
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2007 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 5952 2007-03-03 06:18:46Z drbyte $
*/

body {
margin: 0;
font-family: arial, helvetica, sans-serif;
font-size: 0.72em;
color: #333333;
background: #f3f5f6 url("../images/body_bg.gif") repeat-y center top;
line-height: 17px;
}

a img {border: none; }

#productDescription {
white-space: nowrap;
}

a:link, #navEZPagesTOC ul li a {
color: #2b2b2b;
text-decoration: underline;
}

a:visited {
color: #2b2b2b;
text-decoration: underline;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #2b2b2b;
text-decoration: none;
}

a:active {
color: #2b2b2b;
}

.blue-link a {
color: #0075e2;
}
.columnLeft a, .columnRight a {
text-decoration: none;
}
.columnLeft a:hover, .columnRight a:hover {
text-decoration: underline;
}
#columnCenter {
padding: 8px 0 0 0;
}
h1 {
font: bold 23px Arial;
color: #4c6c74;
border-bottom: 1px dashed #d5d5d5;
padding: 0 0 2px 0;
margin: 0 0 17px 0 !important;
}

h2 {
font: bold 18px tahoma;
padding: 15px 0 5px 0 !important;
display: block;
}

h3 {
font-size: 1.2em;
padding-bottom: 10px;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1em;
}
.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}

/* Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {
height: 1%;
}
*/

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

FORM, SELECT, INPUT {
/* display: inline;*/
font-size: 12px;
margin: 0.1em;
}

TEXTAREA {
margin: auto;
display: block;
width: 95%;
}
/*input:focus, select:focus, textarea:focus {
background: #ffffe7;
margin:0.1em;
}
*/

/* Only for IE7*/
*+ html FIELDSET {
padding: 13px;
margin: 3px 0 12px 0;
border: 1px solid #d6d6d6;
}
/* /Only for IE7*/

FIELDSET {
padding: 13px;
margin: 10px 0 17px 0;
border: 1px solid #d6d6d6;
}

LEGEND {
font: bold 13px arial;
padding: 4px 7px;
color: #305159;
background: #f5f5f5;
}

LABEL {
/* line-height: 1.5em;*/
padding: 0.2em;
line-height: 23px;
}
h4.optionName {
padding: 0;
margin: 0;
width: 100px;
font: bold 11px verdana;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
.categoryListBoxContents a {
text-decoration: none;
}

LABEL.inputLabel {
width: 9em;
float: left;
}

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

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

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 1px;
margin: 5px 0;
border: none;
border-bottom: 1px solid #e4e4e4;
}
.dotted-line {
height: 1px;
background: url("../images/dotted_line.gif") repeat-x 0 0;
}
.float-right {
float: right;
}
.float-left {
float: left;
}

.list-style-none {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.inline-list li {
float: left;
padding: 0 0 0 12px;
}
.align-center {
margin: auto !important;
text-align: center !important;
}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.3em;
margin: 0 10px;
border: 1px solid #9a9a9a;
}

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

.messageStackSuccess {
background-color: #e0f8b6;
color: #000000;
border: 1px solid #d0e46e;
}

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

#contentMainWrapper {
clear:both;
}

/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 945px;
vertical-align: top;
/* border: 1px solid #9a9a9a;*/
}

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

.topper-menu li {
font: 11px verdana;
float: left;
margin: 9px 2px 0 14px;
}

#logoWrapper{
background-color: #ffffff;
height: 58px;
}
#logo {
padding: 0.6em 0 0 0;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.2em;
margin-right: 0.2em;
}

#tagline {
/* margin: 0.7em 0 0 1em;
padding: 0 0 0.4em 1em;*/
float: left;
}
#tagline_header {
border-left: 1px solid #dddddd;
font: bold 20px arial;
color: #888888;
margin: 0.7em 1em;
padding: 0 0 0 1em;
}


#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 44%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/*navigation*/

.current {
font-size: 15px;
padding: 2px;
}

.navSplitPagesLinks, .navSplitPagesResult {
padding: 5px 0 2px 0;
}

.navSplitPagesLinks a {
color: #0075E2;
padding: 2px;
margin: 0px;
}

.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: #abbbd3;*/
padding: 0.5em 0.2em;
font-weight: bold;
/* color: #ffffff;*/
height: 1%;
}
#navSuppWrapper {
border-top: 1px solid #cecece;
margin: 25px 0 0 0;
padding: 8px 0 12px 0;
}
#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

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

#navMain ul li, #navCatTabs ul li {
display: inline;
}

.footer-links li {
font: normal 11px verdana;
float: left;
margin: 0 2px 0 2px;
}

#navMain ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
}
.legalCopyright {
float: left;
font: 11px verdana !important;
line-height: 16px !important;
}

#navCatTabs ul li a {
color: #9a9a9a;
}

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

#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 {
padding: 0 0.5em;
font: 11px tahoma;
margin: 0em;
color: #999999;
}
#navBreadCrumb a {
color: #999999;
}

#top_nav {
background: #00a8d3 url("../images/ezpages_bg.gif") repeat-x;
font: bold 13px Tahoma;
margin: 0em;
height: 36px;
}
#tab_nav a {
color: #ffffff;
text-decoration: none;
}

#tab_nav li {
float: left;
background: url("../images/bg_tabs_left.gif") no-repeat 0 0;
padding: 0 0 0 5px;
}
#tab_nav li a {
display: block;
background: url("../images/bg_tabs_right.gif") no-repeat right 0;
padding: 10px 20px 9px 18px;
}

#tab_nav li:hover {
background-position: left -39px;
}
#tab_nav li:hover a {
background-position: right -39px;
}

#tab_nav #tab_active{
background-position: 0 -78px;
}
#tab_nav #tab_active a {
background-position: right -78px;
}
#tab_nav li.home-link {
padding: 0;
}
#tab_nav li.home-link a {
display: block;
background: url("../images/home_tab.gif") no-repeat left 0;
padding-left: 22px;
}
#tab_nav li.home-link:hover a {
background-position: left -39px;
}


#login_logout_section, #login_logout_section a {
font: normal 12px arial;
color: #fffecf;
padding: 10px 7px;
}
#login_logout_section a:hover {
text-decoration: none;
}

.top-nav-right {
background: url("../images/top_nav_right_bg.gif") no-repeat right top;
height: 36px;
width: 6px;
float: right;
}
.top-nav-left {
background: url("../images/top_nav_left_bg.gif") no-repeat left top;
height: 36px;
width: 6px;
float: left;
}
.tools-nav-right {
background: url("../images/tools_nav_right_bg.gif") no-repeat right bottom;
height: 31px;
width: 6px;
float: right;
}
.tools-nav-left {
background: url("../images/tools_nav_left_bg.gif") no-repeat left bottom;
height: 31px;
width: 6px;
float: left;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}
/* Tools section styles */
#tools_wrapper {
height: 31px;
background: #edf9fd url("../images/tools_nav_bg.gif") repeat-X left bottom;
margin: 0 0 !important;
padding-top: 1px;
}
.line-header {
font: 1px arial;
margin: 0 4px;
}
.search-header-input {
background: url("../images/search_header_bg.gif") no-repeat left top;
height: 21px;
padding: 1px 0 0 3px;
float: left;
}

.search-header {
margin: 3px 0;
}
.search-header input {
font: 12px arial;
border: 0px;
margin: 0px;
color: #696969;
background: none;
width: 160px;
margin: 0 8px 0 0;
}
.search-header form {
float: left;
}
.search-header input:focus {
background: none;
}

.advanced_search {
padding: 0 6px 2px 0;
margin: 5px 0 0 14px;
}
.advanced_search a {
font: 11px Arial;
text-decoration: none;
color: #336b7d;
padding: 0 7px 0 0;
background: url("../images/arrow_small.gif") no-repeat right center;
}
.advanced_search a:hover {
text-decoration: underline;
}
.cart-header {
padding: 1px;
margin: 2px auto 3px auto !important;
}
.cart-header span {
font-weight: bold;
}
.cart-header a:link, .cart-header a:visited {
color: #0075E2;
}
.cart-icon {
width: 16px;
height: 15px;
margin: 1px 6px 0 0;
}
.full {
background: url("../images/cart_full_icon.gif") no-repeat left top;
}
.empty {
background: url("../images/cart_empty_icon.gif") no-repeat left top;
}
.td-search-header {
width: 313px;
}
.td-languages {
width: 303px;
text-align: right;
padding: 0 4px 0 0;
}
.languages-wrapper select, .languages-wrapper {
font: 11px tahoma, arial !important;
}
.languages-wrapper select {
height: 18px;
}
.languages-wrapper form {
float: right;
}
.languages-wrapper label {
padding: 3px 0;
line-height: 17px !important;
}
/* /Tools section styles */


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

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
font-size: 13px !important;
padding: 0.2em;
}

#productAttributes {
padding: 10px 14px;
margin: 10px 0;
border: 1px #f3ecd9 solid;
background: #fcfcea;
}

.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;
}
.centerColumn {
padding: 0.8em 0.4em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}
#siteinfoIP {
float: left;
}
.centerBoxContentsSpecials a, .centerBoxContentsAlsoPurch a, .centerBoxContentsFeatured a, .centerBoxContentsNew a, .specialsListBoxContents a {
color: #0075E2;
}

/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #e2e2e2;
background: #f8f8f8;
padding: 1em;
}

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

.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 {
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartOldItem {
position: relative; /*do not remove-fixes stupid IEbug*/
}
#cartBoxListWrapper a {
color: #0075E2;
}
.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

.cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.7em;
background: #FCFCEA;
border: 1px solid #F3ECD9;
}
#mediaManagerHeading {
margin-top: 5px;
padding-top: 0 !important;
}

.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
color: #888888;
}

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

#productPrices, #reviewsInfoDefaultPrice {
font: bold 16px arial;
color: #a30101;
margin: 0 0 6px 0;
display: block;
}
.orderHistList {
margin: 0;
padding: 0.2em 0em;
list-style-type: none;
}

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

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

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

.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: 0px 15px 15px 10px ;
}

.categoryIcon {}

#cartImage {
margin: 0.5em 1em;
}

/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {
margin: 10px 0;
color: #83785c;
}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

.centerBoxWrapper {
/* border: 1px solid #e6e6e6;*/
height: 1%;
margin: 27px 0;
/* padding: 12px;*/
}

h2.centerBoxHeading {
font: bold 19px Arial;
color: #4c6c74;
border-bottom: 1px dashed #d5d5d5;
padding: 0 0 2px 0;
margin: 24px 0 15px 0 !important;
}
.centerBoxWrapper h2 {
margin: 0 0 15px 0 !important;
}

/*sideboxes*/
.columnLeft {
padding: 0 18px 0 0;
}
.columnRight {
padding: 0 0 0 18px;
}

h3.leftBoxHeading, h3.rightBoxHeading {
font: bold 1.1em arial;
color: #163e4d;
background: url("../images/sidebox_right.gif") no-repeat right top;
}

h3.leftBoxHeading, h3.rightBoxHeading {
color: #163e4d;
background: url("../images/sidebox_right.gif") no-repeat right top;
}

h3.leftBoxHeading a:link, h3.rightBoxHeading a:link, h3.leftBoxHeading a:visited, h3.rightBoxHeading a:visited {
font: normal 11px verdana, arial;
color: #0078e8;
text-decoration: underline;
}


h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #0078e8;
text-decoration: none;
}
.sidebox-header-left {
background: url("../images/sidebox_left.gif") no-repeat left top;
padding: 0 0 0 0.3em;
}
.main-sidebox-header-left {
background: url("../images/main_sidebox_left.gif") no-repeat left top !important;
padding: 0 0 0 0.3em;
}
.main-sidebox-header-right {
background: url("../images/main_sidebox_right.gif") no-repeat right top !important;
padding: 0 0 0 0.3em;
}

#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font: bold 1.1em arial;
}

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
padding: 0.45em 0.3em 0.44em 0.4em !important;
}
.leftBoxHeading label, .rightBoxHeading label {
line-height: 15px;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
margin: 16px 0 4px 0;
}

.sideBoxContent {
border: 1px solid #E6E6E6;
border-top: none;
background-color: #ffffff;
/* padding: 0.7em 0.4em 1em 0.4em;*/
padding: 0.7em 0.9em;
}
.sideBoxContent a, .sideBoxContent div, .rightBoxContainer div, .leftBoxContainer div {
font: normal 11px arial, verdana;
color: #454545;
line-height: 17px;
}
.sidebox-products {
display: block;
color: #0075E2 !important;
padding: 2px;
}
#shoppingcartContent {
background: #f4fcfd !important;
}
.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
.additionalImages a {
text-decoration: none;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin: 0 0 0 8px;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}
#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* categories box parent and child categories */
A.category-top {
font: 12px arial;
text-decoration: none;
padding: 0 0 0 9px;
background: url("../images/arrow.gif") no-repeat 0 4px;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
.categories-top-list {
padding: 4px 0;
background: url("../images/dotted_line.gif") repeat-x 0 top;
}
.no-dots {
background: none;
}
.sub-count {
color: #aaaaaa;
line-height: 12px !important;
}

.subcategory {
padding: 0 0 6px 8px;
}
.subcategory a {
line-height: 12px !important;
}

A.category-subs, A.category-products {
color: #0075E2;
text-decoration: none;
}
A.category-subs:hover, A.category-products:hover {
text-decoration: none;
}

SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

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

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

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

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

.hiddenField {
display: none;
}
.visibleField {
display: inline;
}

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

.productListing-rowheading {
background-color: #cfd8e6;
height: 2em;
}

.tabTable {
margin: 6px 0 4px 0;
}
.tabTable td {
padding: 12px 8px;
text-align: left;
}

.productListing-even {
background-color: #f7f7f3;
}

#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;
}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
clear: both;
}

.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}
#bannerOne, #bannerTwo, #bannerThree {
margin: 0;
padding: 0 0 9px 0;
}


.sideBoxContentItem {
padding-bottom: 10px;
}
.sideBoxContentItem a {
text-decoration: none !important;
}
#productMainImage a {
text-decoration: none;
}

---

and my tpl_product_info_display.php

Quote:

---

<?php
/**
* Page Template
*
* Loaded automatically by index.php?main_page=product_info.<br />
* Displays details of a typical product
*
* @package templateSystem
* @copyright Copyright 2003-2006 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: tpl_product_info_display.php 16242 2010-05-08 16:05:40Z ajeh $
*/
//require(DIR_WS_MODULES . '/debug_blocks/product_info_prices.php');
?>
<div class="centerColumn" id="productGeneral">
<!-- bof Facebook Like Button -->
<p><fb:like></fb:like></p>

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '146753232043367', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- eof Facebook Like Button -->

<!--bof Form start-->
<?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product', $request_type), 'post', 'enctype="multipart/form-data"') . "\n"; ?>
<!--eof Form start-->

<?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?>

<!--bof Category Icon -->
<?php if ($module_show_categories != 0) {?>
<?php
/**
* display the category icons
*/
require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?>
<?php } ?>
<!--eof Category Icon -->

<!--bof Prev/Next top position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
* display the product previous/next helper
*/
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next top position-->

<!--bof Main Product Image -->
<?php
if (zen_not_null($products_image)) {
?>
<?php
/**
* display the main product image
*/
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
}
?>

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->
<!--eof Main Product Image-->



<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
<?php
// base price
if ($show_onetime_charges_description == 'true') {
$one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
} else {
$one_time = '';
}
echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->

<!--bof free ship icon -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon -->

<!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->
<br class="clearBoth" />

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
// do nothing
} else {
?>
<?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
// hide the quantity box and default to 1
$the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
} else {
// show the quantity box
$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
}
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php if ($display_qty != '' or $display_button != '') { ?>
<div id="cartAdd">
<?php
echo $display_qty;
echo $display_button;
?>
</div>
<?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

<!--bof Product details list -->
<?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
<ul id="productDetailsList" class="floatingBox back">
<?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT . $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<br class="clearBoth" />
<?php
}
?>
<!--eof Product details list -->

<!--bof Attributes Module -->
<?php
if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
* display the product atributes
*/
require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
}
?>
<!--eof Attributes Module -->

<!--bof Quantity Discounts table -->
<?php
if ($products_discount_type != 0) { ?>
<?php
/**
* display the products quantity discount
*/
require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?>
<?php
}
?>
<!--eof Quantity Discounts table -->

<!--bof Additional Product Images -->
<?php
/**
* display the products additional images
*/
require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

<!--bof Prev/Next bottom position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
* display the product previous/next helper
*/
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next bottom position -->

<!--bof Tell a Friend button -->
<?php
if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
}
?>
<!--eof Tell a Friend button -->

<!--bof Reviews button and count-->
<?php
if ($flag_show_product_info_reviews == 1) {
// if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
}
}
?>
<!--eof Reviews button and count -->


<!--bof Product date added/available-->
<?php
if ($products_date_available > date('Y-m-d H:i:s')) {
if ($flag_show_product_info_date_available == 1) {
?>
<p id="productDateAvailable" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?></p>
<?php
}
} else {
if ($flag_show_product_info_date_added == 1) {
?>
<p id="productDateAdded" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?></p>
<?php
} // $flag_show_product_info_date_added
}
?>
<!--eof Product date added/available -->

<!--bof Product URL -->
<?php
if (zen_not_null($products_url)) {
if ($flag_show_product_info_url == 1) {
?>
<p id="productInfoLink" class="productGeneral centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?></p>
<?php
} // $flag_show_product_info_url
}
?>
<!--eof Product URL -->

<!--bof also purchased products module-->
<?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?>
<!--eof also purchased products module-->

<!--bof Form close-->
</form>
<!--bof Form close-->
</div>

---

can i trouble you to help me go through and see what still went wrong?

so sorry for the trouble but really appreciate your help.

This part still needs moved up more:

Code:

---

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

---

See the line directly below it:

Code:

---

<!--eof Main Product Image-->

---

That eof means End Of File.....in other words, still BELOW the Main Product Image. You need your block of code ABOVE THIS LINE:

Code:

---

<!--bof Main Product Image -->

---

That's Beginning Of File, which is ABOVE the code for the Main Product Image.

Move it there, and you'll like the outcome a lot better....:smile:

wow now it works!! great!!

how about the text wrapping around the image? whats wrong with my css file?

Hmmm......don't see the text wrapping around the image anymore, but I was playing around with your stylesheet a little bit........throw these in your stylesheet just for a look..............see what you think:

Code:

---

h1#productName {
  font-size: 20px;
  text-align: center;
  padding: 10px 0 10px 0;
  border: 1px solid #f3ecd9;
  background: #fcfcea;
}
#productPrices {
  text-align: center;
  background: #edf9fd;
  width: 61%;
  float: right;
  border: 1px solid #f3ecd9;
}
#productDescription {
  float: right; 
  width: 60%;
  border: 1px solid #f3ecd9;
  background: #fcfcea;
}

---

WOW!! prefect!! i finally straighten that out!! thanks so much :)

one last favor..would you be familiar with the add-on image handler 2? i just cant seem to get the additional image working with or without image handler 2 install....

can you advise on that?

It works the same with or without Image Handler 2. Let's say you have a product image named shirt.jpg and that image is in your main image directory (/images/shirt.jpg). Now, upload your additional images to the same directory with names like:

• shirt_01.jpg
• shirt_02.jpg
• shirt_03.jpg

Zen-Cart should pick these up automatically.

does it have to be in the main directory? i never tried the main directory but i am trying another sub directory within the main one as its easier for the to sort the images.

its not working for the sub directory though :(

No.........IF your Main Product Image isn't there. If you uploaded your Main Product Image to the main image directory.......then, yes.
Your Additional images absolutely HAVE to be in the same directory that your Main Product Image is in.

If you created a folder called "products" in your images directory and uploaded all your Product Images to that, THEN you would also upload all your Additional Images to the SAME folder.

yup i have created "products" in my image directory. have already uploaded in the same name and format in the directory..doesnt work

even tried to upload all the images via IH2 ...doesnt work either..

additional image already turned on in my settings :(

Hmmmmm........And you done everything EXACTLY as suggested HERE?

You might try going to Admin>Tools>Image Handler2, click on "admin", then "clear image cache". Then, opening your product and "Re-specifying" it's image.

yes already followed that..

my images are all in the directory with the following names
directory: /images/store

2010_livestrong_short_n_bib_01.jpg
2010_livestrong_short_n_bib_02.jpg
2010_livestrong_short_n_bib_03.jpg

still doesnt work

And you Main image's name is 2010_livestrong_short_n_bib.jpg, I assume?

You might........just for kicks.....take the 2010 off the front of each one of those.

my main is 2010_livestrong_short_n_bib_01.jpg ..tried without 2010 earlier didnt work :(

its very strange...

Okay. Also have you made sure your additional images are turned on in Admin>Catalog>Product Types>Product - General (edit layout) ?

Show Product Additional Images (set this to 1)

i was thinking could it be some scripts missing in the "tpl_product_info_display.php" of my template? i have turned additional image on for all the product types and still it doesnt work.

What you might do is go to Admin>Tools>Image Handler2>admin, and click "uninstall Image Handler". Then, see if your Additional Images show up.
Don't worry, you can re-install IH in the same place with the same single click.

Ahhhhh.......there ya' go! Now, before you click the "Install Image Handler" clear the Image Cache. Then you should be ok.

it did show up after i uninstall IH2...

http://i54.tinypic.com/v4o6x0.jpg


however the position doesnt seem to be right...its right at the bottom..anyway to change it to under the bigger image?

http://i51.tinypic.com/bhlzky.jpg

anyway to get IH2 working as well cos the images are pixelated without it

ok i found the "cure" to get it working with IH2

http://www.zen-cart.com/forum/showpo...30&postcount=2

but it ended up like this....i still hope the additional images are stacked below the main one.....is there anyway out?

http://i54.tinypic.com/v4o6x0.jpg

http://i55.tinypic.com/2u59utf.jpg

i realised that without the attribute the additional images layout go haywire

Hey, I found this thread to be very helpful, however, there's some help I need too. =( Get Em Fast, I've used some of your codes listed to move around the "price" and the "add to cart". Could you help me with fixing my layout? Here is the page http://oembargain.com/index.php?main...products_id=95. The images are below http://oembargain.com/before.jpg this is before, and this is what I'm trying to do: http://oembargain.com/want.jpg

For #1 - Is it possible to have all the additional images aligned to the main image?
#2- Instead of having the Model attribute at the bottom, where can I change it to be below the main image?
#3- Can I align the price and the cart like where I put the image?
#4- Nevermind, I figured why the wrapping was strange (it was because my add to cart was in the way)

Could you please advise me? I've been strolling all over the place =(

Thank you very muchh.

Sorry, I forgot to resize the images ;x

cchan, Sure...........I'm sure we can get it all worked out for you. But, first, you'll need to take your site out of maintenance mode so I can see it.

Sorry, I totally forgot about that. I just took the site off maintenance mode. =) Also, thanks a lot for replying!

hi cchan, i like the way you want to lay out.... Get Em Fast.. would you be able to post the script here for that layout so I could make use of it too...as the additional images are a pain in my layout

thank you zoombee! =) Yea, the additional images are pretty annoying, therefore for every product I put like 3 additional images so that the layout would be the same for every item and lined up next to the main image.

yes your layout is so ideal..been trying to figure out a way so long already wahahaa....but after seeing yours it finally make sense :p

haha, it took me forever to get this page up and I'm still not done. So much to work on =(. Now I'm wondering how to make the additional images show where the main picture is when clicked. Is there a way to do this instead of having a popup window?

Try the Ajax Image Swapper mod in Free Addons.

Thank youu! Now I'm just wondering if it would be possible to remove the main images and just use the images I left in my description? I couldn't exactly remove the main picture from the product info page. Here's a link to see an example http://oembargain.com/index.php?main...roducts_id=178

My recollection of the Ajax Image Swapper was that it is supposed to replace or work with the main product image, not show a large image in addition to the main image. But I haven't used it, so don't know much more.

I see. That's fine. I'm just here trying different mods here and there. haha. Could you tell me how do I resize the additional images that are on the side of the main image? and locate them to be under the main image instead of being on the side if I want to?

Have you looked at Additional Images Relocated with CSS, in Free Addons? It does what you describe.
For resizing, the additional images use the "small image" setting (but won't grow if that setting is larger than the pixel size of the image file).

Hm, I actually haven't. I would give that a try. I was thinking there was a way to change that through edtting the css file or something. So many addons are driving me insane =(

Getting the additional images aligned below the main image requires at least some editing in tpl_product_info_display.php, along with stylesheet rules. The mod does it for you.

Oh okay, thanks for that information. I have another question now... I have removed the layout boxes on the right side of my page. I want to have the center or main page extend to where the layout boxes previously were. How do I change this? Here's the link to see the page again http://oembargain.com/index.php?main...index&cPath=23

Here is an image of what I'm actually trying to dohttp://oembargain.com/images/priceandquantity.jpg. The red box shows where I want the Price and Quantity box to be. I don't know if it would work if I extend the main page?

I finally figured out out to cancel out the right column and extend my center column, but I still don't know how to move the quantity and price =(

You need to move the add to cart code block to just above or below the main image code section, and find or add in your stylesheet

#cartAdd {float: right;}