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
  #1  
Old 02-03-2005, 07:12 PM
 
anandat anandat is offline
 

X-Adept
  
Join Date: Jan 2004
Posts: 914
 

Default 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 ?
__________________
X-Cart: 4.7.7 LIVE
Skin:Ultra by xcartmods.co.uk
X-cart Modules: | ACR, Rich Google Search, Customer Testimonials | Cloud Search, | Websitecm: CDSEO (2.1.9)
---------------
Server: Linux
php: 5.3
mysql: 5.0.89
----------------
Reply With Quote
  #2  
Old 02-04-2005, 06:41 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default

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.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #3  
Old 02-05-2005, 10:11 AM
 
Loony2nz Loony2nz is offline
 

Member
  
Join Date: Nov 2004
Posts: 20
 

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

Quote:
Originally Posted by anandat
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 ?

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
__________________
www.TheFrugalDiver.com
Where Diving Won\'t Cost A Lung
------------------------
X-Cart Version 4.0.5
Reply With Quote
  #4  
Old 02-05-2005, 11:43 AM
 
Loony2nz Loony2nz is offline
 

Member
  
Join Date: Nov 2004
Posts: 20
 

Default

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
__________________
www.TheFrugalDiver.com
Where Diving Won\'t Cost A Lung
------------------------
X-Cart Version 4.0.5
Reply With Quote
  #5  
Old 02-05-2005, 12:07 PM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default

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.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #6  
Old 02-05-2005, 09:14 PM
 
anandat anandat is offline
 

X-Adept
  
Join Date: Jan 2004
Posts: 914
 

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

Quote:
Originally Posted by Loony2nz
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'">
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:
Code:
<TD bgcolor="#FFFFCC" align="center" valign="top" width="{$width}%" onMouseOver="this.bgColor='#D4F0FE'" onMouseOut="this.bgColor='#FFFFCC'">

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.
__________________
X-Cart: 4.7.7 LIVE
Skin:Ultra by xcartmods.co.uk
X-cart Modules: | ACR, Rich Google Search, Customer Testimonials | Cloud Search, | Websitecm: CDSEO (2.1.9)
---------------
Server: Linux
php: 5.3
mysql: 5.0.89
----------------
Reply With Quote
  #7  
Old 02-06-2005, 05:34 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default

Add this to the <td>:

style="border: 1px solid #CCCCCC"

Replace with whatever color code you want.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #8  
Old 02-06-2005, 11:46 AM
 
Loony2nz Loony2nz is offline
 

Member
  
Join Date: Nov 2004
Posts: 20
 

Default

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
__________________
www.TheFrugalDiver.com
Where Diving Won\'t Cost A Lung
------------------------
X-Cart Version 4.0.5
Reply With Quote
  #9  
Old 02-06-2005, 12:29 PM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default

Yes, CSS is clearly the better way to go. Allows for a much easier edit later on, and it is much cleaner as well.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #10  
Old 03-17-2005, 08:52 PM
 
x-online x-online is offline
 

Senior Member
  
Join Date: Apr 2004
Location: Australia, Sydney
Posts: 189
 

Default

balinor, wanna move this to custom mod?
__________________
X-Cart version 4.x (Most likely will be the latest version)
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 07:41 AM.

   

 
X-Cart forums © 2001-2020