Colour Picker Box

[idrive72]

Hello everyone and happy 2023!
I would like to know if there is a way to be able to enlarge the color picker box. I would like to enlarge it to 100px.
Thank you.

 

[lousyfool]

You should be able to do so with custom CSS.

 

[idrive72]

You should be able to do so with custom CSS.

Yes, I thought so but I don't know where to start. Can you give me an example please?

 

[lousyfool]

Standard CSS routine:
Use the dev tools of your browser to find the element in question, see what CSS is currently in use, eventually simulate in browser, then override it accordingly in custom CSS file.

 

[idrive72]

Standard CSS routine:
Use the dev tools of your browser to find the element in question, see what CSS is currently in use, eventually simulate in browser, then override it accordingly in custom CSS file.

Yes, I tried but I don't know how to trace the css file

 

[lousyfool]

... I don't know how to trace the css file

Not sure what you mean, but here's the code:

.colourpicker_bgoutput {
    width: 100px !important;
    height: 100px !important;
}

Also, if you want to post an image here, simply use "Upload a file".

 

[idrive72]

Ok thanks for the answer but what I wanted to know was which file should I go to write the css code. For the moment I solved it, I don't know if it's right but it works. I created a custom_css.php file, copying it from the example of the same name, the file path is:
mysite.com\components\com_fabrik\views\form\tmpl\bootstrap
Thank you

 

[troester]

I created a custom_css.php file

That's exactly what custom_css.php is for.
Alternatively you can add an override for plugins\fabrik_element\colourpicker\layouts\fabrik-element-colourpicker-form.php

 

[idrive72]

Great, good to know!
One last question: having several color pickers on my site, if I want to apply the change only to one in particular, how should I do it?

 

[lousyfool]

Well, as usual in CSS, then you should add an ID or a class to the selector specific for this one element.

In your case, the code should probably look like

.fb_el_score_setup___bgtitcolorenv .colourpicker_bgoutput {
    width: 100px !important;
    height: 100px !important;
}

 

[idrive72]

Great!!! Thanks again.