Jump to content

[solved] How to get rollover borders on featured products images


Recommended Posts

Hello,

Can anyone advise us on how to get rollover borders on the images in Featured Products on the homepage? not sure where or how exactly to edit the css


thanks in advance

Share this post


Link to post
Share on other sites

Hi, have figured it out myself - If anyone's interested:

using Version 1.2.5.0

in global.css at around line 1180 find the code:

#center_column div.products_block a.product_image img{
   float:none;
   margin:0px;    
}




to add the rollover border function you need to duplicate the line of code and include the 'hover' function, aswell as editing the margin slightly in the original line of code. Replace the above line of code with this:

#center_column div.products_block a.product_image img{
   float:none;
   margin:5px;    
#center_column div.products_block a.product_image:hover img {
   float:none;
   margin:0;
border: solid 5px #00FF00;
}



I've left the border at 5 points thickness and in bright green as an example, but you can change the colour and thickness. You may need to edit the spacing between images if you find that image borders overlap.

thanks

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More