PHP pro coders help needed, product layout

[waghelak]

Hello, this is a TM template code i think and not standard Zen code. Hope someone can help.

I believe this is the right part of the code that is displaying what i am looking to change. Basically at present the products on the main page are displayed with description on the right hand side i.e
image *****************************
image*************
image************
image************
image******************************

This also includes a price and a button for more description.

What i want:

Have two products in a line with description underneath it so i can display more products in each page. two in a line all the way down.
From the wanted image you will see what i mean exactly. Also for some reason i havent got the buy now button on it too maybe its in admin somewhere which i need to turn on, however not really fussed about it as long as i have change the display in this way.

Hope someone can help, will appreciate it greatly.

code:

<?php
//templatemonster function
function tm_listing2($href, $img, $name, $desc, $price)
{

$price = preg_replace('/(Save:&nbsp;\d+%\soff)/i', '', $price);
$price = preg_replace('/(<span class="normalprice">)/i', '<span class="ee">', $price);
//$price = preg_replace('/(<br)/i', '<font', $price);
//$price = preg_replace('/(<span class="productPriceDiscount"><br>)/i', '<span>', $price);
echo '<!--main cell -->
<div class="dt m_t_dr" >
<div class="dr">
<div class="dc m_t_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-t.gif').'</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r " ><div class="m_pad">
<div class="main_cell_h_l">'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '1px').'</div>
<div class="dt" >
<div class="dr">
<div class="dc main_cell_c1" ><a href="'.$href.'">'.$img.'</a></div>
<div class="dc main_cell_c2" >
<div class="main_cell_c2_margin">
<font>'.$name.'</font><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '8px').'<br>
'.substr(strip_tags($desc),0,80).'<br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '8px').'<br>
<div class="dt price_block" >
<div class="dr">
<div class="dc c1" ><span class="price_text">'.$price.'</span></div>
<div class="dc c2" ><a href="'.$href.'">'.zen_image(DIR_WS_TEMPLATE.'images/button_details.gif').'</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
<div class="dt m_b_dr" >
<div class="dr">
<div class="dc m_b_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-b.gif').'</div>
</div>
</div>
<!--main cell end -->'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '3px').'<br>';
}

function tm_listing($href, $img, $name, $desc, $price)
{
/*echo '<div class="dt center_block1" >
<div class="dr">
<div class="dc center_block1_c1" ><a href="'.$href.'">'.$img.'</a><br>
</div>
<div class="dc" >
<br style="line-height:17px;">
<div class="c_b_h_text">'.$name.'</div>
<br style="line-height:10px;">
<div class="c_b_m_text">'.substr($desc,0,80).'</div>
<br style="line-height:11px;">
<div class="h_l3">'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '1px').'</div>
<br style="line-height:3px;">
<div class="price_block price_text"><strong>Our price:</strong> <span >'.$price.'</span>'.zen_image(DIR_WS_TEMPLATE.'images/v-l.gif', '', '', '','style="margin-left:10px; margin-right:10px; vertical-align:middle; margin-top:-2px;"').'<a href="'.$href.'">'.zen_image(DIR_WS_TEMPLATE.'images/button_details.gif').'</a></div>
</div>
</div>
</div>
<!--center block1 end -->
<br style="line-height:3px;">
<!--center block2 -->
<div class="h_l2">'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '1px').'</div>';*/
$price = preg_replace('/(Save:&nbsp;\d+%\soff)/i', '', $price);
$price = preg_replace('/(<span class="normalprice">)/i', '<span class="ee">', $price);
//$price = preg_replace('/(<br)/i', '<span', $price);
$price = preg_replace('/(<span class="productPriceDiscount"><br)/i', '<span', $price);
echo '<!--main cell -->
<div class="dt m_t_dr" >
<div class="dr">
<div class="dc m_t_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-t.gif').'</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r " ><div class="m_pad">
<div class="main_cell_h_l">'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '1px').'</div>
<div class="dt" >
<div class="dr">
<div class="dc main_cell_c1" ><a href="'.$href.'">'.$img.'</a></div>
<div class="dc main_cell_c2" >
<div class="main_cell_c2_margin">
<font>'.$name.'</font><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '8px').'<br>
'.substr(strip_tags($desc),0,80).'<br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '8px').'<br>
<div class="dt price_block" >
<div class="dr">
<div class="dc c1" ><span class="price_text">'.$price.'</span></div>
<div class="dc c2" ><a href="'.$href.'">'.zen_image(DIR_WS_TEMPLATE.'images/button_details.gif').'</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
<div class="dt m_b_dr" >
<div class="dr">
<div class="dc m_b_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-b.gif').'</div>
</div>
</div>
<!--main cell end -->'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '3px').'<br>';
}


function tm_head($text)
{
echo '<!-- head cell -->
<div class="dt m_t_dr" >
<div class="dr">
<div class="dc m_t_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-t.gif').'</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r " ><div class="m_pad">
<div class="m3_dr m3_pad"><span class="m3_h_text">'.$text.'</span></div></div>
</div>
</div>
</div>
<div class="dt m_b_dr" >
<div class="dr">
<div class="dc m_b_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-b.gif').'</div>
</div>
</div>
<!-- head cell end -->'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '2px').'<br>';
}
function tm_head_end()
{
echo '';
}

function tm_box_head($text, $link = false, $style = 'style1')
{
if (!empty($link))
{
$text = $text.' (<a href="'.zen_href_link($link).'" class="rr">more</a>)';
}
switch ($style)
{
case 'style1':
{
$ret = '<div class="m_t_dr" >
<div class="dr">
<div class="dc m_t_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-t.gif').'</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r" ><div class="m_pad">
<div class="m_top m_top_pad">
<span class="m_h1_text">'.$text.':</span><br>
</div></div>
</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r " ><div class="m_pad1">
<div class="m_h_l">'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '1px').'</div></div>
</div>
</div>
</div>';
break;
}
case 'style2':
{
$ret = '<div class="dt m_t_dr" >
<div class="dr">
<div class="dc m_t_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-t.gif').'</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r" ><div class="m_pad">
<div class="m_top m_top_pad">
<span class="m_h_text">'.$text.':</span><br>
</div></div>
</div>
</div>
</div>
<div class="dt m_l" >
<div class="dr">
<div class="dc m_r " ><div class="m_pad1">
<div class="m_h_l">'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '1px').'</div></div>
</div>
</div>
</div>';
break;
}
}
return $ret;
}
function tm_box_cont($text,$style = 'style1')
{
switch ($style){
case 'style1':
{
$ret = '<div class="dt m_l" >
<div class="dr">
<div class="dc m_r" ><div class="m_pad">
<div class="m_bot"><div class="m_bot_pad">
'.$text.'</div>
</div></div>
</div>
</div>
</div>
<div class="dt m_b_dr" >
<div class="dr">
<div class="dc m_b_r" >'.zen_image(DIR_WS_TEMPLATE.'images/m-l-b.gif').'</div>
</div>
</div>
<!-- cont col1 cell1 end -->'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '3px').'<br>';

break;
}
case 'style2':
{
$ret = $text.'';
break;
}

}
return $ret;
}
?>

[Kim]

You need to talk to TM about this.

[waghelak]

i am sure how everyone knows how TM operates. Especially they dont help with something which the template is not meant to do i.e change the format etc etc. Just thought someone here might be able to point me to the right code.

[gjh42]

Put in a ticket with them first; even though it probably won't get results, enough complaints may eventually convince them to change the way they make templates. Then fix the problem yourself.

The
function tm_listing($href, $img, $name, $desc, $price)

is what forces the "details" button instead of the standard flexible Zen Cart functionality.
Compare this line with the add to cart functionality in /includes/modules/product_listing.php to see what to put in. There is quite a bit misssing, and it will take some close examination. It is possible that the information needed for the ZC standard code to work is not available in this function - you will have to try it and see. You may have to settle for recoding the button to another fixed purpose... or else scrap this code altogether and get product_listing.php back in the loop.

[gjh42]

Oops - left out the line I was referencing!

<div class="price_block price_text"><strong>Our price:</strong> <span >'.$price.'</span>'.zen_image(DIR_WS_TEMPLATE.'images/v-l.gif', '', '', '','style="margin-left:10px; margin-right:10px; vertical-align:middle; margin-top:-2px;"').'<a href="'.$href.'">'.zen_image(DIR_WS_TEMPLATE.'imag es/button_details.gif').'</a></div> 

[waghelak]

Cheers guys thanks for the help on this. Will see how i get on with it. Might play around with it myself as its a waste of time with TM as i have experience with it.

[waghelak]

Hi Guys,

I managed to get it sorted eventually, it was the modifications they have on the /your_template/templates/tpl_featured_products.php and others similar to that. I have copied the coding from original zen_cart and got the functionality i wanted back.

Just last thing if someone can help, everytime when you display something on the main page, a header comes with it.. i.e. new products for september, special products etc etc... how do i get rid of that display and just have the products there.

-------------------------------------------
new products for september
--------------------------------------------


I want to get rid of the whole display not just the writing and take care of the spacing it would leave on the top.

Thanks again.

[gjh42]

Add to your stylesheet

h2.centerBoxHeading {display: none;}

[waghelak]

Thanks. Tried it but did not make any difference, here is the full stylesheet, do i need to put it in any particular place.

a img {border: none; }

a, #navEZPagesTOC ul li a {
color: #3E7691;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {

}

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;
font-size:13px;
}

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

FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
}
FORM {margin:0px; padding:0px;}

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

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

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #EACFAE;
background:#FFFFFF;
height:100%;
}

LEGEND {
font-weight: bold;
}

LABEL, h4.optionName {
line-min-height: 1.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
}

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

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 {
min-height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-min-height: 1.8em;
padding: 0.2em;
border: 1px solid #000000;
}

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

.messageStackSuccess {
background-color: #F1F6E6;
color: #000000;
}

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

/*wrappers - page or section containers*/
#mainWrapper {
text-align: left;
width: 100%;
vertical-align: top;
}

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

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

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

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

#accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width:95%
}

.floatingBox {
margin: 0;
width: 45%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/*navigation*/

.navSplitPagesResult { margin-top:5px; margin-left:5px; background:#ffffff}
.navSplitPagesLinks { margin-top:5px; background:#ffffff}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin:0px 2px 3px 0px;
list-style-type: none;
}
.navNextPrevWrapper{
margin-bottom:2px;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #9a9a9a;
font-weight: bold;
color: #ffffff;
min-height: 1%;
width: 100%;
}

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

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

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

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-min-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin:5px 5px 0 0px;
}
.buttonRow2{
margin:5px 0px 0 0px;
}


#navBreadCrumb {
background-color: #cc9900;
}

#navEZPagesTop {
background-color: #ffff33;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

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

.alert {
color: #FF0000;
margin-left: 0.5em;
margin-right:5px;
}
.advisory {}
.important {
font-weight: bold;
margin:5px;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
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-min-height: 2.2em;
padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
min-height: 2.2em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #33CC33;
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartOldItem {
color: #32434A;
position: relative; /*do not remove-fixes stupid IEbug*/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

#cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {

}
.normalprice{ text-decoration:line-through; font-size:11px;}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
font-size:11px;
text-transform:uppercase
}

#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: 0em 1em 1em 0em ;
}

.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 {}
.columnRight {}

h3.leftBoxHeading, h3.leftBoxHeading a {
/*font-size: 1em;*/
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
border: 1px solid #ffffff;
margin-top: 1.5em;
}

.sideBoxContent {
padding: 0.4em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #FFFF00;
}

.rightBoxHeading {
margin: 0em;
background-color: #663366;
padding: 0.2em 0em;
}

h3.leftBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #FF0000;
text-decoration: none;
}

.rightBoxContent {
margin-bottom: 1em;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {

}

.cartTotalsDisplay{
font-size: 10px;
}

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

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

.forward {
float: right;
}

.bold {
font-weight: bold;
}

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

.rowEven {
background-color: #F0F0F0;
min-height: 1.5em;
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
}

TR.tableHeading {
min-height: 2em;
}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {

}

/*!!!!!!!!!*/
.rbg1 {background:#FFFFFF;}
.rp1 {padding-top:10px;}
.rp2 {padding:0 5px 5px 5px;}
.box3 {margin-left:5px; margin-right:5px;}
#gvFaqDefaultMainContent{margin:10px 15px 0 15px;}
#gvFaqDefaultContent{margin:0 5px 0 5px;}
.main_block strong{margin-left:5px;}
#reviewsDefaultNoReviews{margin:0 5px 5px 5px;}
.c3{margin-bottom:10px;}
#createAcctSuccessMainContent{ margin:5px;}
.rc1 { margin-left:18px; width:90px; text-align:center}
.rr {font-size:13px; color:#000000; text-decoration:underline}
.rr1 {height:3px;}

body{
padding:0px;
margin:0px;
background:#FFFFFF url(../images/t-dr.gif) repeat-x top;
text-align:center;
}

a:hover{text-decoration:none;}

img { border:0px;}

.dt { display:table; width:100%;}

.dr { display:table-row; width:100%; height:100%;}

.dc { display:table-cell; text-align:left; vertical-align:top; width:100%; }

.main_text, input, textarea, body, font, select
{
font-family: Tahoma;
font-size:11px;
line-height:13px;
color:#32434A;
}

a {color:#E92100;}

font { color:#71980E; font-weight:bold;}

ul { margin:0px; padding:0px; list-style: none;}

.ul1 { margin-top:-5px;}
.ul1 li { background: url(../images/a.gif) no-repeat left; margin:0px; padding-left:9px;}
.ul1 li a { font-size:10px; color:#262932; line-height:16px; text-decoration:none;}
.ul1 li a:hover { text-decoration:underline;}

.ul2 li { background:url(../images/h-l1.gif) repeat-x bottom; margin:0px; padding: 3px 0px 3px 0px;}
.ul2 li a { background:url(../images/bul.gif) no-repeat left; padding-left:12px; color:#3A4750; text-decoration:none; line-height:14px;}
.ul2 li a:hover { color:#EA4E00;}

.ul3 li { background:url(../images/h-l.gif) no-repeat bottom left; margin:0px; padding: 3px 0px 3px 0px;}
.ul3 li a { background:url(../images/bul.gif) no-repeat left; padding-left:12px; color:#3A4750; text-decoration:none; line-height:14px;}
.ul3 li a:hover { color:#EA4E00;}

input { vertical-align:middle;}

.main { width:754px; margin:auto;}

.header1 { height:54px;}
.header1_c1 { width:314px;}
.header1_v_l { width:1px; background:url(../images/v-l.gif) repeat-y;}
.header1_c2 { width:227px; text-align: right;}
.header1_c2 img { vertical-align:middle;}
.header1_c3 { width:37px;}
.header1_c4 { width:36px;}
.header1_c5 { width:137px;}
.header1_text { color:#34464D; font-size:10px; font-weight:bold;}
.header1_sel { width:119px; color:#58646A; vertical-align:middle;}

.header2_c1 { width:194px; background:url(../images/t.gif) no-repeat top left; height:34px;}
.header2_c2 { width:560px;}

.input1 { width:91px; height:18px; padding-left:5px;}

.footer { height:68px;}

.footer_c1 { width:27px;}
.footer_c2 { width:544px;}
.footer_c3 { width:179px;}

.footer_text, .footer_text a { color:#59676F; text-decoration:none;}
.footer_text a:hover { text-decoration:underline;}

.m_t_dr { background:url(../images/p.gif) repeat-x top left;}
.m_t_r { background: url(../images/m-r-t.gif) no-repeat right;}
.m_l { background:url(../images/p.gif) repeat-y left;}
.m_r { background:url(../images/p.gif) repeat-y right;}
.m_b_dr { background:url(../images/p.gif) repeat-x bottom left;}
.m_b_r { background: url(../images/m-r-b.gif) no-repeat right;}

.m_pad { margin: 0px 2px 0px 2px;}
.m_pad1 { margin: 0px 1px 0px 1px;}

.m_h_l { background:url(../images/m2-m-dr.gif) repeat-x top; height:4px;}

.m_top { background:url(../images/m2-t-dr.gif) repeat-x top;}
.m_top_pad { padding: 13px 10px 10px 16px;}

.m_bot { background:url(../images/m2-b-dr.gif) repeat-x top;}
.m_bot_pad { padding: 10px 33px 10px 15px;}

.m_h_text { color:#EA4E00; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(../images/a3.gif) no-repeat left;}

.m_h1_text { color:#71980E; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(../images/a1.gif) no-repeat left;}

.b_br { background:url(../images/b-dr.gif) repeat-x top; height:100%;}

.col1 { width:559px;}
.col2 { width:3px;}
.col3 { width:192px;}

.cont_col1 { width:178px;}
.cont_col2 { width:3px;}
.cont_col3 { width:378px;}

.m1_dr { background:url(../images/m1-dr.gif) repeat-y;}
.m1_t { background:url(../images/m1-t.jpg) no-repeat top;}
.m1_b { background:url(../images/m1-b.gif) no-repeat bottom; height:100%;}
.m1_pad { margin: 18px 10px 15px 19px;}
.m1_h_text { color:#294817; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(../images/a4.gif) no-repeat left;}

.sel1 { width:143px; color:#3A4750;}

.col3_cell1 { height:86px;}

.cont_col3_cell1_c1 { width:154px;}
.cont_col3_cell1_c2 { width:220px;}
.cont_col3_cell1_c2_margin { margin: 14px 13px 10px 17px;}
.cont_col3_cell1_c2_text1 { font-weight:bold; text-transform:uppercase; line-height:12px;}
.cont_col3_cell1_c2_text2 { color:#EA4E00; font-size:12px; line-height:12px;}
.h_l { height:2px; background:#CFD2D3;}

.m3_dr { background:url(../images/m3-dr.gif) repeat-x top #FFBF00;}
.m3_pad { padding:9px 2px 7px 12px;}
.m3_h_text { color:#FFFFFF; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:bold; padding-left:8px; background:url(../images/a2.gif) no-repeat left;}

.main_cell_h_l { background:#B3B4B6; height:3px;}

.main_cell_c1 { width: auto; padding: 9px 42px 12px 34px;}
.main_cell_c2 { width:216px;}
.main_cell_c2_margin { margin: 5px 30px 10px 0px;}

.price_block { width:180px; }
.price_block .c1 { width:106px; padding-top:4px;}
.price_block .c2 { width:auto;}
.price_text { font-size:12px; color:#EA4E00; font-weight:bold;}

.categor_text { color:#32434A;}
.categor_text a, .categor_text font { color:#EA4E00; font-weight:normal;}
.categor_text a:hover { color:#32434A; font-weight:bold;}

.prod_main_cell_margin { margin-right:25px; margin-top:7px;}

.prod_link { color:#3A4750; text-decoration:none; background:url(../images/bul.gif) no-repeat left; padding-left:8px;}
.prod_link:hover { text-decoration:underline;}

.prod_margin { margin: 13px 30px 9px 34px;}

.product1_c1 { width:63px;}
.product1_c2 { width:56px;}
.product1_c3 { width: auto;}

.product_input { width:47px; height:17px; border-color:#CDCDCD; border-bottom-width:1px; border-right-width:1px; background-color:#ffffff; padding-left:5px; color:#2B2D2F; line-height:11px; padding-top:0px; }

.prod_text { font-size:10px;}

.cart_cell { text-align:center; padding: 1px 0px 1px 0px;}
.cart_cell_w1 { width:1px; background: url(../images/3-v-l.gif) repeat-y;}
.cart_cell1 { width:101px;}
.cart_cell2 { width:111px;}
.cart_cell3 { width:69px;}
.cart_cell4 { width:90px;}

.cart_cell_h_text { color:#71980E; font-size:11px; line-height:11px;}

.cart_h_l { background:#CBCAC5; height:1px;}

.cart1_cell { text-align:center; padding: 11px 0px 3px 0px; }
.cart1_cell_w1 { width:1px; background: url(../images/3-v-l.gif) repeat-y;}
.cart1_cell1 { width:101px; padding: 11px 0px 7px 0px; }
.cart1_cell2 { width:111px;}
.cart1_cell3 { width:69px; padding: 11px 0px 7px 0px; }
.cart1_cell4 { width:90px; padding: 11px 0px 7px 0px;}

.cart_cell_margin { margin-left:16px;}

.cart_cell5 { width:283px; text-align: right;}
.cart_cell6 { width:89px;}

.cart_cell5_margin { margin: 10px 11px 10px 8px;}

.cart_price_text {color:#E65E00; font-size:11px; line-height:11px; font-weight:bold;}

.cart_input { width:30px; height:14px; border: 1px #989797 solid; color:#636363; font-size:11px; text-align: left; padding-top:0px;}

.cart_text { font-size:10px; text-decoration:none; font-weight:bold; color:#32434A;}
.cart_text:hover { text-decoration:underline;}

.pop_main { width:417px; height:462px; margin:auto;}

.pop_head { height:79px;}
.pop_head_c1 { width:296px;}
.pop_head_c2 { width:121px;}
.pop_head1 { height:0px; background:#262626;}

.pop_head_text, .pop_head_text a { color: #4C4C4C; text-decoration:none; font-size:11px;}
.pop_head_text a:hover { text-decoration:underline;}

.pop_margin { margin: 0px 10px 15px 9px;}

.pop_main_text { color:#3A4750; line-height:14px;}

.pop_cell_margin { margin: 0px 20px 15px 15px;}

.pop_bot_padding { padding: 12px 10px 13px 16px;}

.pop_bot_text { color:#59676F;}

[gjh42]

Another member has just asked about the same problem you had with the details button, and I expect there are many more who would like to change it. Could you post exactly what worked for you , to help future viewers?