Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to give border & mouse over effect to feature produc

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #41  
Old 04-27-2009, 06:45 PM
  AusNetIT's Avatar 
AusNetIT AusNetIT is offline
 

Senior Member
  
Join Date: Apr 2009
Posts: 152
 

Default Re: How to give border & mouse over effect to feature produc

HI Ashley,

Where you see this class? because i can not find under products_t.tpl ? see my above post with my current tpl.

And also i can't see .prod_box in skin.css?

may be i'm using wrong Products_t.tpl or products.tpl?

Thanks,

Asela
__________________
Melbourne website design | SEO in Melbourne

Installed Ver 4.6.0
Reply With Quote
  #42  
Old 04-27-2009, 06:59 PM
  ARW VISIONS's Avatar 
ARW VISIONS ARW VISIONS is offline
 

X-Man
  
Join Date: Jan 2007
Location: Pensacola, FL
Posts: 2,536
 

Default Re: How to give border & mouse over effect to feature produc

I viewed the source on your site. this is from your site.

<div class="prod_box">
<a href="product.php?productid=4529&amp;cat=6038&amp; page=1" class="ProductTitle">3M POST-IT EASEL PAD 635X775MM WHITE 30 SHEETS</a><br>
SKU: 3M559WE<br>
<a href="product.php?productid=4529&amp;cat=6038&amp; page=">
<img src="http://www.sparktrading.com.au/images/T/3M559WEt.jpg" alt="3M POST-IT EASEL PAD 635X775MM WHITE 30 SHEETS"></a>

<p><font class="ProductPrice">Our price: <span style="white-space: nowrap;">AUD 0.00</span></font><br><font class="MarketPrice"></font></p>
<table width="100%" cellpadding="3" cellspacing="0">



</table><table width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td height="25">

<table onclick="javascript: self.location='product.php?productid=4529&amp;cat= 6038&amp;page=';" class="ButtonTable" cellpadding="0" cellspacing="0">
<tbody><tr><td><img src="/skin1/images/but1.gif" class="ButtonSide" alt=""></td><td class="Button"><font class="Button">Buy Now</font></td><td><img src="/skin1/images/but2.gif" class="ButtonSide" alt=""></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
__________________
xcart 5.1.2
Reply With Quote

The following user thanks ARW VISIONS for this useful post:
AusNetIT (04-27-2009)
  #43  
Old 04-27-2009, 08:30 PM
  AusNetIT's Avatar 
AusNetIT AusNetIT is offline
 

Senior Member
  
Join Date: Apr 2009
Posts: 152
 

Default Re: How to give border & mouse over effect to feature produc

Thank You Sooooooooooooooooooooooo Much
__________________
Melbourne website design | SEO in Melbourne

Installed Ver 4.6.0
Reply With Quote
  #44  
Old 06-13-2010, 07:56 PM
 
junliw1975 junliw1975 is offline
 

Advanced Member
  
Join Date: Dec 2008
Location: Maple, Ontario, Canada
Posts: 62
 

Default Re: How to give border & mouse over effect to feature produc

Hi Ashley:

Do you have version of this code for 4.2?

Thanks


Quote:
Originally Posted by Ashley
back up products_t.tpl amd skin1.css****

In products_t.tpl
find this code around line 19

<td width="{$width}%" class="PListCell">

change it to this

<td width="{$width}%" class="PListCell" onmouseover="this.className='PListCellOver'" onmouseout="this.className='PListCell'">

In skin1.css
find this class

.PListCell {
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
}

and replace with this

.PListCell {
BACKGROUND-COLOR: #eaeaea;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
border:solid #cccccc 1px;
}


also add this class to skin1.css

.PListCellOver {
BACKGROUND-COLOR: #cccccc;
TEXT-ALIGN: center;
PADDING: 10px;
VERTICAL-ALIGN: top;
border:solid #cc0000 1px;
}

change background and border colors as you see fit.
__________________
x-cart-4.7.5 Gold ,
Reply With Quote
  #45  
Old 07-11-2010, 01:33 PM
  Vacman's Avatar 
Vacman Vacman is offline
 

X-Adept
  
Join Date: Sep 2005
Location: Torrance, CA
Posts: 792
 

Default Re: How to give border & mouse over effect to feature produc

Bump
__________________
Carl Tice

X-Cart 4.6.6
X-Payments 3.0
ReBOOT 3.4.1

PHP 5.6.30
MySQL 5.6.35
Linux 2.6.32-042stab120.18
ionCube PHP Loader v4.7.3
Perl 5.10.1
Reply With Quote
  #46  
Old 07-22-2010, 08:21 AM
  Vacman's Avatar 
Vacman Vacman is offline
 

X-Adept
  
Join Date: Sep 2005
Location: Torrance, CA
Posts: 792
 

Default Re: How to give border & mouse over effect to feature produc

I should have mentioned that I would love to see this work for 4.3.x
__________________
Carl Tice

X-Cart 4.6.6
X-Payments 3.0
ReBOOT 3.4.1

PHP 5.6.30
MySQL 5.6.35
Linux 2.6.32-042stab120.18
ionCube PHP Loader v4.7.3
Perl 5.10.1
Reply With Quote
  #47  
Old 07-25-2010, 06:57 AM
  Vacman's Avatar 
Vacman Vacman is offline
 

X-Adept
  
Join Date: Sep 2005
Location: Torrance, CA
Posts: 792
 

Default Re: How to give border & mouse over effect to feature produc

OK - I have been doing some work on this with mixed results.

Borrowed the css from Dana7 and added this to the main.css
Code:
/* Products list as multicolumn table */ .PListCell { padding: 0; width: 400px; border-right: 1px solid #e5e8ee; border-bottom: 1px solid #e5e8ee; float: left; background: #f9f9f9; height: 400px; } .PListCell img { border: 1px solid #fff; } .PListCellHover { padding: 0; width: 400px; border-right: 1px solid #d9e6fa; border-bottom: 1px solid #d9e6fa; float: left; background: #f0f5fd; height: 400px; } .PListCellHover img { border: 1px solid #abb5c7; } .PListCellInside { padding: 10px; text-align: center; } .PListCellInside .sku { margin-top: 10px; text-align: center; } /* Inside boxes */ .PListCellInside .image { padding: 0; margin: 5px 0; } .PListCellInside .sku { margin-top: 5px; } .PListCellInside .market-price { padding: 8px 0 0 0; color: #a6a6a6; font-size: 10px; } .PListCellInside .price-row { padding: 2px; } .PListCellInside .price-row .price { font-weight: normal; } .PListCellInside .price-row .price-value, .PListCellInside .market-price .price-save { color: #b51a00; font-weight: normal; font-size: 12px; } .PListCellInside .buttons-row, .PListCellInside .button-row { margin: 1px 0 0 0; } .PListCellInside .buttons-row button, .PListCellInside .button-row button { margin: 0; float: none; } .PListCellInside .buy-now { margin-top: 1px; } .PListCellInside .buy-now .quantity-title { width: auto; padding-right: 5px; } .PListCellInside .product-title { padding: 0; color: #103c89; font-weight: bold; } .alter-curr { padding: 0 0 0 28px; color: #a6a6a6; font-size: 10px; font-style: italic; } /*

Then I decided to redo the products_t.tpl
Code:
{* $Id: products_t.tpl,v 1.58.2.1 2010/02/12 10:39:56 aim Exp $ vim: set ts=2 sw=2 sts=2 et: *} {list2matrix assign="products_matrix" assign_width="cell_width" list=$products row_length=$config.Appearance.products_per_row} {assign var="is_matrix_view" value=true} {if $products_matrix} <table cellspacing="3" class="products products-table width-100" summary="{$lng.lbl_products_list|escape}"> {foreach from=$products_matrix item=row name=products_matrix} <tr{interline name=products_matrix additional_class="product-name-row"}> {foreach from=$row item=product name=products} {if $product} <td> <div class="PListCell" onmouseover="this.className='PListCellHover'" onmouseout="this.className='PListCell'"> <script type="text/javascript"> <!-- products_data[{$product.productid}] = {ldelim}{rdelim}; --> </script> <a href="{$product.alt_url|default:$product.page_url|amp}" class="product-title">{$product.product|escape}</a> {if $product.productcode} <div class="sku">{$lng.lbl_sku}: {$product.productcode|escape}</div> {else} &nbsp; {/if} <a href="{$product.alt_url|default:$product.page_url|amp}">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.tmbn_x image_y=$product.tmbn_y product=$product.product tmbn_url=$product.tmbn_url}</a> {if $active_modules.Special_Offers && $product.have_offers} {include file="modules/Special_Offers/customer/product_offer_thumb.tpl"} {/if} {if $product.rating_data} {include file="modules/Customer_Reviews/vote_bar.tpl" rating=$product.rating_data productid=$product.productid} {/if} {if $product.product_type ne "C"} {if $active_modules.Subscriptions ne "" && $product.catalogprice} {include file="modules/Subscriptions/subscription_info_inlist.tpl"} {elseif $product.appearance.is_auction} <span class="price">{$lng.lbl_enter_your_price}</span><br /> {$lng.lbl_enter_your_price_note} {else} {if $product.appearance.has_price} <div class="price-row"> <span class="price">{$lng.lbl_our_price}:</span> <span class="price-value">{include file="currency.tpl" value=$product.taxed_price}</span> <span class="market-price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</span> </div> {if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0} <div class="market-price"> {$lng.lbl_market_price}: <span class="market-price-value">{include file="currency.tpl" value=$product.list_price}</span> {if $product.appearance.market_price_discount gt 0} {if $config.General.alter_currency_symbol ne ""}, {/if} <span class="price-save">{$lng.lbl_save_price} {$product.appearance.market_price_discount}%</span> {/if} </div> {/if} {if $product.taxes} <div class="taxes">{include file="customer/main/taxed_price.tpl" taxes=$product.taxes is_subtax=true}</div> {/if} {/if} {if $active_modules.Special_Offers && $product.use_special_price} {include file="modules/Special_Offers/customer/product_special_price.tpl"} {/if} {/if} {else} &nbsp; {/if} {if $active_modules.Product_Configurator and $is_pconf and $current_product} {include file="modules/Product_Configurator/pconf_add_form.tpl"} {elseif $config.Appearance.buynow_button_enabled eq "Y" and $product.product_type ne "C"} {include file="customer/main/buy_now.tpl"} {else} &nbsp; {/if} {if $product.fclassid gt 0} <div>{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$product.productid}</div> {/if} {if !$smarty.foreach.products_matrix.last} <tr class="separator"> <td colspan="{$config.Appearance.products_per_row|default:1}">&nbsp;</td> </tr> {/if} </div> </td> {/if} {/foreach} </tr> {/foreach} </table> {/if}

When I go to my home page, the Featured Products section looks beautiful.... BUT...

When I go and view any categories where there are multiple products in that category, I end up with a vertacle column of products and then a row of three products.

Now, my template format is supposed to be showing products in a three-column format, so I am sure this issue has to do with the fact that I stripped out the "matrix" coding.

The other thing I can't figure out is that on the same product page (not home page) I also end up with a center section labeled as a Featured Products section containing all my products from the category I am currently viewing. Then just below that the normal category products.

Maybe someone with a little better grasp on this can take my code and make it into something more usable.
__________________
Carl Tice

X-Cart 4.6.6
X-Payments 3.0
ReBOOT 3.4.1

PHP 5.6.30
MySQL 5.6.35
Linux 2.6.32-042stab120.18
ionCube PHP Loader v4.7.3
Perl 5.10.1
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 12:40 PM.

   

 
X-Cart forums © 2001-2020