Product color picker, selected option change border onclick

[Dickie]

I have the color picker option on my product pages and have removed the drop down menu as I think it looks a bit messy and confuses buyers as shown in this post http://www.prestashop.com/forums/topic/61135-when-using-colour-picker-the-drop-down-to-be-removed/

 

Now that is great but I would like some way of showing which color option is selected by adding a border to the box/image once the customer has clicked the colour they want.

 

I have tried adding a class of a:selected to the css but nothing also tried to add a function to the onclick js in product.tpl still nothing, but the $('#wrapResetImages').show('slow');" function works fine.

 

here is a link to a product page on my site: http://www.funkyshirt.co.uk/funny-tshirts/9-you-look-better-on-facebook-t-shirt.html

 

Thank you

[vekia]

by default, right after switch color, selected color parent <li> object has got class ="selected"

you should check it and create for li.selected border param

[Dickie]

Hi Vekia,

 

I have had no luck trying to sort this out could you give me a little more detail as to sort the problem?

 

Cheers

[zod]

In your product.css try adding this piece (it will show round color icons with a light gray border, and with a red border for the selected one). I find this style very intuitive, change with your theme's colors if you wish.

#color_to_pick_list li {
	float: left;
	margin: 0 3px 3px 0;
	border: 4px solid #eeeeee;
	clear: none;
	border-radius: 50%;
}
#color_to_pick_list li a.color_pick {
	display: block;
	height: 22px;
	width: 22px;
	cursor: pointer;
	border-radius:50%;
}
#color_to_pick_list li.selected {
	border: 4px solid #ff0000;
}