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?