Smarter Color Picker

[Bill Dalton]

Currently working on a site in PS v1.4.9.1

 

Most products use color picker html color code and do a good job. But I also have clothing products that would best be sold using image swatches. Problem is that I want the small default size of color picker for html codes, but I want a larger, say 100 x 100 for products that use Swatches.

 

I could enter an identifier in one of the product fields and perhaps use that as a flag for products to increase the size of the color picker boxes? Would that be possible for a non-programmer who doesn’t mind getting his hands dirty … with a little help from his friends?

[NemoPS]

Hi Bill,

I think it's hard to be done without at least some small css knowledge. Those boxes, if i remember correctly, are about 15 px, and are setup in product.css....

 

Just checked, here is the code you want to modify (prestashop_new template, line 136 of product.css)

/* color_picker */
#pb-left-column #color_picker p {
padding-bottom:5px;
font-weight:bold
}
#color_picker #color_to_pick_list {list-style-type:none}
#color_picker #color_to_pick_list li {
float:left;
margin-right:8px;
padding:1px;
border:1px solid #ccc
}
#color_picker #color_to_pick_list a.color_pick{
display:block;
height:15px;
width:15px
}

 

Just change width and height there

 

Cheers!

[Bill Dalton]

Thanks Nemo1 !!

 

So what I want is to use a field that exists in my product as a flag. For example I don't use the field "UPC:". So when I enter a product that will use the larger swatches. I can put "1" in that field.

 

Then I would need a piece of code in product.tpl that controls the CSS and if UPC: = 1 write the CSS inline and that should override globle.css

 

So something like;

 

if UBC: = 1,

 

/* color_picker */

 

}

#color_picker #color_to_pick_list a.color_pick{

display:block;

height:100px;

width:100px

}

 

But I need help on the actual code to do that. Assuming this will even work ....

[razaro]

You could try something like this.

In product.tpl where color picker is, change code to

 <!-- colors -->
 <div id="color_picker" {if $product->upc}class="large"{/if}>

 

and in product.css use specific styles for class large like

#primary_block #color_picker.large a.color_pick {
width: 100px;
height: 100px;
}

[Dh42]

I think you guys are over complicating it. Look at this image, http://screencast.com/t/abLXcVDa Now that you have the attribute number you can target it with CSS. See in this image, http://screencast.com/t/NgbT7c0m1Z each color uses its attribute number in the css so you can target it. Like how in the example I have the gray box at 30 x 30 instead of 15 x 15

[Bill Dalton]

razaro, thanks, that was what I wanted ... until I seen the way Dh did it.

 

Dh, can you give a example on how to set up a color to work like that? I need to set that up in globle.css right? And the color ID, good tip on that thanks, it works the same regardless of html color code or image swatch?

[NemoPS]

And Dh gets us all

I guess he means this Bill:

#color_6 {

height: 100px;

width: 100px

}

 

Of course, that #6 attribute will be only for the special products you choose

[Dh42]

Correct, just target the swatches like that and leave the normal color alone and the swatches will be bigger.

[Bill Dalton]

I tried putting it in several places but I can't seem to find where I need to enter. Just by chance Nemo1, the ID is 6. Please take me the last step.

#color_6 {

height: 30px;

width: 30px

}

 

------------------------------------------

 

 

 

/* color picker */

#primary_block #color_picker {margin:20px 0 0 0;padding:0 20px 20px 20px;border-width:1px;border-style:solid;}

#primary_block #color_picker h3 {}

#primary_block #color_picker ul {padding:10px 0 0 0;overflow:hidden;}

#primary_block #color_picker ul li {display:inline;float:left;margin:0 7px 0 0;}

#primary_block #color_picker ul li a {width:25px;height:25px;display:block;border:1px solid #777;cursor:pointer;}

#primary_block #color_picker ul li a:hover {}

 

 

 

/* color_picker */

#pb-left-column #color_picker p {

padding-bottom:5px;

font-weight:bold

}

#attributes fieldset {padding-bottom:10px;}

#attributes fieldset label {vertical-align:top;}

#attributes .attribute_list {clear: both;float: left;}

.attribute_list #color_to_pick_list {list-style-type:none;width: 363px;}

.attribute_list #color_to_pick_list li {float:left;margin:0 8px 8px 0;padding:1px;border:1px solid #ccc}

.attribute_list #color_to_pick_list li.selected{border:1px solid #000}

.attribute_list #color_to_pick_list a.color_pick{display:block;width:25px;height:25px;}

[Dh42]

Put this at the bottom of your product.css file.

a#color_6 {height:30px!important; width:30px!important;}

[Bill Dalton]

THUNDERBOLT and LIGHTNING

 

How is this possible? It’s like magic. That’s it … I’m finally going to read that big book on CSS I bought last year.

 

Today really opened my eyes regarding how to look at and solve a problem. Thank you razaro. Thank you to Nemo1, and thank you very much Dh. I can think of a couple of very good uses for this. For example I could make new colors stand out by making them just a little larger. Or I could use a swatch for the color and make it look like the word NEW! is floating above, but really just part of a larger swatch.

 

Thank you Dh42, I have a feeling a lot of people will benefit from this thread.

Edited January 27, 2013 by Bill Dalton (see edit history)

[Dh42]

Bill,

I am glad its what you need, happy selling.

[Bill Dalton]

a#color_14 {height:50px!important; width:50px!important;}

 

This line works on this site,

http://bdalton.ca/en/home/2-ipod-shuffle.html

 

But not this site,

http://test12.uniform.ca/white-cross-tops/11-636-white-cross-v-neck-scrub-top.html

 

What can I look for that would stop it from working on site 2?

[Dh42]

The color picker is laid out differently in the other site, you will need to address the colors like this

#color_14 a

[Bill Dalton]

THUNDERBOLT and LIGHTNING

[Bill Dalton]

Just want to add this,

 

 

#primary_block a.color_pick img

{

width:50px;

height:50px;

}

 

Was needed as well.

 

So to sum up,

 

If you need to resize only some colors but not all,

use,

a#color_14 {height:50px!important; width:50px!important;}

or

#color_14 a {height:50px!important; width:50px!important;}

 

That will resize the "cell" of the color size. However, if you use a swatch, in-addition to resizing the cell, you need to resize images.

 

 

#primary_block a.color_pick img

{

width:50px;

height:50px;

}

 

And that's all I need.

 

I'm assuming if you need to control individual images, it would be possible.

http://test12.uniform.ca/avida-scrub-pants/12-tp10-unisex-scrub-pant-with-contrast-trim.html

Edited February 2, 2013 by Bill Dalton (see edit history)