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:

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: https://www.jeepart.com/decals_stickers

THANKS for any help u can offer ! :yes:

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/index.php?main_page=product_info&cPath=1_2_5&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:

<!--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:

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

Then, add this to your stylesheet.css:

#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

/**

• 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

<?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:

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

See the line directly below it:

<!--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:

<!--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:

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