How to give border & mouse over effect to feature produc
 

I just visited site http://www.7dana.com/xcart/home.php?skin=7_orange

Can any one tell me how to give mouse over effect & border to featured products & category colum also ?

That is done with a combination of CSS and the onmouseover function. Basically when the mouse is over the cell, it calls a different style, which has a different background color. Pretty simple actually, but a nice effect. Looks particularly nice when your product images have a transparent background.

Re: How to give border & mouse over effect to feature pr
 

I have successfully done this with my site. (Pretty good little tweak to help featured products sell....i hope hehe)

Anyway, in /customers/main/products_t.tpl

find this:
<TD align="center" valign="top" width="{$width}%" class="DialogBox">

replace with:
<TD bgcolor="#FFFFCC" align="center" valign="top" width="{$width}%" nMouseOver="this.bgColor='#D4F0FE'" onMouseOut="this.bgColor='#FFFFCC'">

The "bgcolor" attribute and the onMouseOut color attribute should match.

And as Padraic says above, it would look better if my thumbnails had a transparent background. Now I have some graphic editing to do...sigh.

Try it and let me know how it works for you.
Oh..this was done on X-Cart 4.0.5

Well, that sorta works. After more testing, I see that all items are coming out with the rollover, not just the featured products.

If someone can figure out how to limit the rollover to just the featured products on the homepage, before I do, that would be great :)

But, now that I think about it....it might not be that bad to have for all your products....eh

--Chris

Well since featured products uses the same template as the products display, you would have to create a copy of products.tpl or products_t.tpl and call that one from featured.tpl.

However, if you have 'Display only featured products in multi-column format' checked, you can make the change to products_t.tpl and it won't affect your regular products.

Re: How to give border & mouse over effect to feature pr
 

Thanks loony2nz it's work like a charm :)
Just you miss O in the code "nMouseOver="this.bgColor='#D4F0FE'" while pasteing.
The working code will be:

Is there any way we can give border to the featured products TD like at http://www.7dana.com/xcart/home.php?skin=7_orange
This will look really good & more professional.

Add this to the <td>:

style="border: 1px solid #CCCCCC"

Replace with whatever color code you want.

I actually took the lead from 7dana and duplicated what they did.

in skin1.css file i added:

.FeaturedDialogBoxOff {
BACKGROUND-COLOR: #FFFFFF;
BORDER: 1px solid #990000;
}
.FeaturedDialogBoxOn {
BACKGROUND-COLOR: #D4F0FE;
BORDER: 1px solid #0000FF;
}

in /customer/main/products_t.tpl:

Changed:
<TD align="center" valign="top" width="{$width}%" class="DialogBox">

to:
<TD class="FeaturedDialogBoxOff" align="center" valign="top" width="{$width}%" onMouseOver="this.className='FeaturedDialogBoxOn'" onMouseOut="this.className='FeaturedDialogBoxOff'" >

This is acutally the smarter and better way to go. I need to start using CSS more instead of directly making changes to the templates themselves. It detracts from the uniformity of development of the rest of the site.

You might want to give this a try too.

--Chris

Yes, CSS is clearly the better way to go. Allows for a much easier edit later on, and it is much cleaner as well.

balinor, wanna move this to custom mod?

It works great with IE and Opera, but is it also supposed to work with Firefox?
Or am I doing something wrong? :(

I use FF primarily. I ditched IE. Code works well in my FF.

visit my site and see if you get the rollovers on the featured products on the homepage.

URL in my sig.

--Loony2nz

Thanks for your reply Loony2nz.
The rollovers on your site also work well in my Firefox.

I think the problem is something else (no idea what, btw) because I've
copied the rollover code straight into my skin1.css and in the .tpl
where I want it to show up. And besides that, I'm also having numerous
other browser compability problems... :twisted:

What I don't understand is the fact that my rollovers look fine in IE and
Opera but simply won't show up in Firefox. Even class="FeaturedDialogBoxOff"
doesn't work, with the result that my boxes are without borders.

Maybe you got any ideas or suggestions?
I like your site by the way - looks great and clean!

Thanks!

This worked great on my current client site, thanks!

Here's an alternate way of achieving the same, may be more FF friendly? :?


And then the TD tag with the onMouse event handlers and function call:

Ok quick question. 2 Actually..

On the 7dana site (http://www.7dana.com/xcart/home.php) the boxes there are long and rectangular and spaced out more.

On mine (www.thegamegeek.net/home.php) the boxes are square and closer together. I want to set it more like what they did.

How can I change that?

Second question. Now that I have these boxes, I want to remove the border lines of the "Featured products" Right now it's these boxes in a box. How can I do that? Homepage only..

Thanks!

Daniel

This is awesome, I was able to get it to work on the "featured Products" area, but I am not sure how to get it to work on the catetory listings? Like on the site, I would like to do this on the category block, with my category links? Can anyone help me?

Thanks

Anyone, I played with this all weekend but my CSS skills are not stellar. I am still not sure how to add the color switch over the category links. Please...

This is SWEEEEEEEEEET. Thank you so much for this. I have absolutely no editing skills what so ever and I had no problems getting this to work.

I have one question though.

If i wanted Rounded edges how would I do that?

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

I know this is an old thread, but has anyone tried this on 4.1 series. I'm experimenting and can't get it to work at all.

Greg

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

I was looking for something else and found this threat. Just tried on my site and works like a charm. Just follow the CSS and products_t.tpl changes and you are all set. I am not sure though about changing the background of my pics since it kind of looks nice the way it is.

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

Strange is the CCS sheet, seems a little messed up, have edited the text, hover on the home page so it has red highlight witout underline! when going to catagories which then shows sub catagories the list is bold black text which doesnt do anything other then red underline! would like the text to be none nold which is easy using itemslist font weight = none, but when selecting hover = color #FF3300 there is no red high light? even selecting direct in the list to fontweight bold on hover absoulutely nothing? the only way is by changing A.hover = fontweight bold but then the whole site links all go bold which is not good!

xcart havnt given much detail to css file for all areas of the site, they should have a detailed description of what each part of the css file changes!

there is articals on the forum but most seem related to featured products and changing styles directly in the templates! although an idea, who knows what and where to add a style sheet in subcatagories, tried a few lines in the <td> for nmouseover? no change here either, the text just refuses to be changed, strange that in html its simpler, php seems to be quite complex.!!

any ideas appreciated.

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

Just found the quickest solution instead of adding styles in the .tpl file found that in the css file there is Itemslist which can make font bold and change colour, but wouldnt do the mouseover effects, just found it had a A. infront of the itemslist once i removed the A. from it i was able to CONTROL the text, mouseover effects colour no problem, good to experiment although such simple things should be in the user manual ! there must be so many new users that waste hours finding solutions to simple tasks!

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

This works fine in 4.1......but I want the feature to not have a background, just the products have a back ground.

Of course if I delete the CSS dialog background color I lose the back ground in the detailed products page.....So How do I have no main back ground in the feature and leave the bmain background on the products page and detail products page......

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

I couldn't see any distinguishing differences between the areas. Perhaps one simple way would be to get the skin1/customer/main/featured.tpl and start and end with a custom div like so...

<div class="featured_items"> {*starting featured div *}
{* The featured.tpl content goes here untouched *}
</div> {* ending div at end of tpl *}

and in the main css file add a new featured_items class called from the new div (more or less a duplicate of TD.DialogBox but with a different bg colour)...

.featured_items TD.DialogBox {
background-color: #ff0000; /* demo colour red */
/* remaining class content */
}

this way only the featured items are affected and the product pages remain unscathed - hopefully

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

I cannot get that to work the DIV does nothing to the feature.tpl When I tried it other ways ˆ could it to change colors but I want it gone, not just changed colors.....

If you went to my site to try and look, the site is locked you where looking at an OSC site.....

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

I thought this was a simpler way of going around it - rather than duplicating a whole bunch of tpls (or adding vars) just to rid a class. The example of changing colours maybe poor but it should work, it's only a simple div surrounding the featured products table and aids in giving control over feat. products if needed. And you could set the css background property to transparent/inherit.

I tested this on a fresh install.

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

That did it.....background set to transparent.....fixed it alll.....very cool! Thanks

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

Cool. As my other suggestion to rid the class from featured products wouldn't have been an elegant one ;D

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

I have try to apply this to 4.1.11 but the code is so different will some one can show me what to do in the customer/main/products_t.tpl

Thank you so much for your help

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

how do i do this in 4.1 ? pls

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

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.

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

HI,

Installed 4.1.12 and add but didn't work?

{* $Id: products_t.tpl,v 1.30.2.12 2008/07/15 12:07:40 ferz Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

<table width="100%" cellpadding="5" cellspacing="1">

{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}

{section name=product loop=$products}
{assign var="discount" value=0}

{if %product.index% is div by $config.Appearance.products_per_row}
<tr>
{assign var="cell_counter" value=0}
{/if}

{math equation="x+1" x=$cell_counter assign="cell_counter" }

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

<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
{$lng.lbl_sku}: {$products[product].productcode}<br />
{/if}
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}">{i nclude file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" && $products[product].have_offers && $usertype eq 'C'}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>
</tr>
</table>
{if $printable neq 'Y'}
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}">{$ lng.lbl_see_details}</a>
{/if}
{if $products[product].product_type ne "C"}
<br />
<br />
{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}
{include file="modules/Subscriptions/subscription_info_inlist.tpl"}
{else}
{if ($config.General.unlimited_products ne "Y" && ($products[product].avail le 0 or $products[product].avail lt $products[product].min_amount) && $products[product].variantid) or ($products[product].taxed_price ne 0 or ($products[product].variantid && $products[product].variants_has_price) or ($active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""))}
{if $products[product].taxed_price ne 0 or ($products[product].variantid && $products[product].variants_has_price)}
{if $products[product].list_price gt 0 and $products[product].taxed_price lt $products[product].list_price}
{math equation="100-(price/lprice)*100" price=$products[product].taxed_price lprice=$products[product].list_price format="%3.0f" assign=discount}
{if $discount gt 0}
<font class="MarketPrice">{$lng.lbl_market_price}: <s>
{include file="currency.tpl" value=$products[product].list_price}
</s></font><br />
{/if}
{/if}
<font class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</font><br /><font class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</font>{if $discount gt 0}{if $config.General.alter_currency_symbol ne ""},{/if} {$lng.lbl_save_price} {$discount}%{/if}
{if $products[product].taxes}<br />{include file="customer/main/taxed_price.tpl" taxes=$products[product].taxes is_subtax=true}{/if}
{/if}
{if $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}
{include file="modules/Special_Offers/customer/product_special_price.tpl" product=$products[product]}
{/if}
{else}
<font class="ProductPrice">{$lng.lbl_enter_your_price}</font>
{/if}
{/if}
{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}
<div align="center" style="width: 100%; padding-top: 10px;">
{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}
</div>
{/if}
{*** Uncomment it if you need 'Buy Now' button ***
{if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}
{include file="customer/main/buy_now.tpl" product=$products[product]}
{/if}
*** Uncomment it if you need 'Buy Now' button ***}
{/if}
</td>

{capture name=prod_index}
{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}
{/capture}
{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }
</tr>
{/if}

{/section}

{if $cell_counter lt $config.Appearance.products_per_row}
{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}
<td class="SectionBox"> </td>
{/section}
</tr>
{/if}

</table>
</td>
</tr>
</table>
{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses && $js_enabled}
{include file="modules/Feature_Comparison/compare_selected_button.tpl"}
{/if}

and add that css part to main.css but......Can someone help please?

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

if you added it to main.css that is version 4.2

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

HI,

Sorry add to skin1.css. i just check with 7dana css and found this FYI

/*
FEATURED PRODUCTS
*/
.PListCell { height: 370px; width: 185px; } /* Width and Height of product box */
.PListCellInside { height: 350px; width: 171px; } /* Width and Height of product box */
/*

Basically i'm looking for boarder round the Product and 4 coloumns?

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

post a url please

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

Hi Ashley

Thanks for your replay and this is the site and still not live. But let me know if you can help to make Product boarder look like the one i attaced image.


http://www.sparktrading.com.au/home.php?shopkey=168

Thanks,

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

Ok so the code you want to edit is

<div class="prod_box">

you want to change this to

<div class="prod_box" onmouseover="this.className='prod_box_over'" onmouseout="this.className='prod_box'">

Now add borders to .prod_box

then add the class .prod_box_over and add background colors and boders to this class

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

Hi

Sorry where i can find this code to edit? Steps pls.

Asela

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

same exact steps as before except the names are changed.