Color picker for predefined colors made with CSS only - xmpie-users/uStore-js GitHub Wiki

In some cases it is necessary to have the end user to select a color from pre-defined values. It makes sense in this case to use Gallery Grid as DUC in order present the end user the colors he can select from.

But the result would be very big represented on the page and depending on how many colors you need to show it would fill a lot of space.

A solution is shown here. You can use this little CSS in order to modify the look and feel of the Gallery Grid and make it smaller and handy. See your self:

Here is the CSS code to implement this. It is necessary to replace the Dial_{{number}} with a valid value. In the following example I have 3 dials with Gallery Grid defined and all three will get smaller.

<style>
	#Dial_10379 .FieldOptionItem.FOGrid, #Dial_10379 .FieldOptionItem.FOGrid .optionIcon,
	#Dial_10380 .FieldOptionItem.FOGrid, #Dial_10380 .FieldOptionItem.FOGrid .optionIcon,
	#Dial_10381 .FieldOptionItem.FOGrid, #Dial_10381 .FieldOptionItem.FOGrid .optionIcon {

		width: 25px;
		height: 25px;
		left: 0px;
		margin: 3px;	
	}

	#Dial_10379 .FieldOptionItem.FOGrid .optionTitle,
	#Dial_10380 .FieldOptionItem.FOGrid .optionTitle,
	#Dial_10381 .FieldOptionItem.FOGrid .optionTitle {
		display:none //Hides the text bellow the image
	}

	.FieldOptionItem.selected.FOGrid .optionIcon {
	    border: 2px solid var(--color-highlight); //Makes the solid line thicker from 1px to 2px
	}
</style>

You would still create the images with the colors and place them into your theme / image folder for product properties in order to show the color itself.