Selected Color - Highlight with CSS

[sc157]

In the color picker I'd like the border around the color swatch to darken once selected. Is this possible? For example, if the color "Pink" is selected, the border around the color swatch in the color picker would change to black, instead of remaining gray.

Thank you very much in advance.

[robkwal]

Me to!!! Someone help PLEASE!!!

[rocky]

I don't understand. PrestaShop already does this by default. Here is the code in the /* product.tpl */ section of global.css that does it:

#primary_block a.color_pick {
   display: block;
   width: 20px;
   height: 20px;
   border: 1px solid #666;
   cursor: pointer
}
#primary_block a.color_pick:hover { border: 1px solid #000 }

The colours have a grey border (#666) that changes to black (#000) on hover.

[Quokka Web]

I have the same question!

Actually, the last post does not answer to the question. The problem is not the "hover" effect but once we chose a color how to highlight the current selected color?

[ckarone]

Hello all,

 

To Highlight the selected color, you just have to add those 2 lines in your js/product.js template:

 

Find

$('#color_'+id_attribute).fadeTo('fast', 1, function(){ $(this).fadeTo('slow', 0, function(){ $(this).fadeTo('slow', 1, function(){}); }); });

and remplace by

$('#color_to_pick_list .color_pick').removeClass('selected');
$('#color_'+id_attribute).fadeTo('fast', 1, function(){ $(this).fadeTo('slow', 0, function(){ $(this).fadeTo('slow', 1, function(){}); }); }).addClass('selected');

 

and in your css you just have to add this line:

#primary_block a.color_pick.selected {border:solid 2px}

 

Ckarone

[mrjsanderson]

This works well if the user selects color from the color picker. (Note for others: js file is in theme js folder not root js folder)

 

Unfortunately the color picker does not update if the user selects color from the drop down so you are left with the wrong color square selected.

 

Any ideas about how to get them to sync?

[Smijn1]

Did you ever find a solution for the issue that the color picker does not update if the user selects color from the drop down?

Having the same issue on my site.. Or does anyone else have a solution for me?

 

product.js code for the color picker:

function colorPickerClick(elt)
{
	id_attribute = $(elt).attr('id').replace('color_', '');
	$(elt).parent().parent().children().removeClass('selected');
	$(elt).fadeTo('fast', 1, function(){
								$(this).fadeTo('fast', 0, function(){
									$(this).fadeTo('fast', 1, function(){
										$(this).parent().addClass('selected');
										});
									});
								});
	$(elt).parent().parent().parent().children('.color_pick_hidden,#color_pick_hidden').val(id_attribute);
	findCombination(false);
}