[cheesypoof]

Neat little trick to add a color picker for editable regions by using http://jscolor.com/.

Notes:
The color picker 'message' editable region must be placed after the color editable regions.
Navigate to line 329 of the included js file to modify any of the default options.

color-picker.png (9.85 KiB) Viewed 12701 times

Code: Select all

<cms:editable name='color' label='Color' desc='Click to see picker' type='text' order='1' />
<cms:editable name='color_2' label='Color 2' desc='Click to see picker' type='text' order='2' />
<cms:editable name='color_3' label='Color 3' desc='Click to see picker' type='text' order='3' />

<cms:editable name='color_picker' type='message' order='4' >
<script type="text/javascript" src="addons/jscolor/jscolor.js"></script>
<script type="text/javascript">
new jscolor.color(document.getElementById('f_color'), {});
new jscolor.color(document.getElementById('f_color_2'), {});
new jscolor.color(document.getElementById('f_color_3'), {});
</script>
</cms:editable>

color-picker.zip

Place the files in your couch folder.

(12.15 KiB) Downloaded 1840 times

Sorry to British English speakers.

[KK]

@cheesypoof
Thank you for sharing this very useful snippet.
It is strange that even I had used exactly the same script to add a colorpicker to a client's site a little while back

I went with the 'window.addEvent' approach that removes the constraint of having to define the message editable region after all the textboxes

Code: Select all

<cms:editable name='color_picker' type='message' >
   <script type="text/javascript" src="addons/jscolor/jscolor.js"></script>
   <script type="text/javascript">
      window.addEvent('domready', 
         function(){ 
            new jscolor.color($('f_color'), {})
            new jscolor.color($('f_color_2'), {})
            new jscolor.color($('f_color_3'), {})
         }
      );
   </script>
</cms:editable>

Just a little note to users that a 'f_' has to be appended to the name of text regions while adding them to the colorpicker e.g.
If the name of the text region is 'color_2', we use 'f_color_2' in the following statement
new jscolor.color($('f_color_2'), {})

Thanks again @cheesypoof.

Hi, is there any way to display the color picker when on page editing? I tried the method explained by @cheesypoof and the explained by @kk it works on the admin panel but when on page editing the color picker doesn't display, only the text area to input the value, don't know if there is something to add or the color picker is not supported by on page editing

Solved! if anyone try to use the color picker with on page edit you have to set the path to the jscolor.js file using k_site_link like this:

Code: Select all

<cms:editable name=select_color" label="Select color" type="text"/>

<cms:editable name="color_picker" type="message">
          <script type="text/javascript" src="<cms:show k_site_link/>/couch/addons/jscolor/jscolor.js"></script>
         <script type="text/javascript">
            window.addEvent('domready',
               function(){
                  new jscolor.color($('f_select_color'), {})
              }
            );
         </script>

And to add it to on page editing:

Code: Select all

<cms:popup_edit "select_color|color_picker"/>

Sorry in the previous post missed the editable closing tag, the code is:

Code: Select all

<cms:editable name="color_picker" type="message">
   <script type="text/javascript" src="<cms:show k_site_link/>/couch/addons/jscolor/jscolor.js"></script>
   <script type="text/javascript">
     window.addEvent('domready',
      function(){
      new jscolor.color($('f_select_color'), {})
     }
    );
   </script>
</cms:editable>

Also works with:

Code: Select all

<cms:editable name='color_picker' type='message' >
   <script type="text/javascript" src="<cms:show k_site_link/>/admin/addons/jscolor/jscolor.js"></script>
   <script type="text/javascript">
   new jscolor.color(document.getElementById('f_select_color'), {});
   </script>
</cms:editable>

[KK]

Thank you for letting us know the solution, ar2ro

Good Morning Couchies,

does any one know if and how it's possible to get RGB or better RGBa values out of the color picker? It's needed for a gradient with transparency. It should be possible to get RGB at least and fill in the "a" value by hand.

Thank you!

Hello,
is it not possible to use the color picker in repeatable regions?

I'm just finishing a website for which the customer can choose his favorite colors via the backend. I used the color picker in earlier projects but it seems not to work with repeatable regions. Has anyone a clue how to adapt the color picker for that case? or any alternatives?

Hi,

I have cloned pages - every page is a slide from the Revolution slider.
Each slide has a region Color Picker for choose a color, the problem is that I have repeatable region in mosaic.
Color Picker no longer works - can we solve this problem?

Thank you very much

Hello guys
I am sorry to continue the topic but I have many repeatable regions in many sites where I have to use Color Picker.
However, the Color Picker does not work.
Can we really do that?

I have some partial solution, but it is not complete.

We usually do this:

Code: Select all

   <cms:editable name='color_picker' type='message' order='200' >
      <script type="text/javascript" src="<cms:show k_site_link/>panel/addons/jscolor/jscolor.js"></script>
      <script type="text/javascript">
         new jscolor.color(document.getElementById('f_slide_type_2_color'), {});
         new jscolor.color(document.getElementById('f_slide_type_2_color_backgr'), {});
         
         new jscolor.color(document.getElementById('f_slides-0-clr'), {});
         new jscolor.color(document.getElementById('f_slides-1-clr'), {});
         new jscolor.color(document.getElementById('f_slides-2-clr'), {});      
         
      </script>   
   </cms:editable>

Here f_slides-0-clr, f_slides-1-clr,f_slides-2-clr are repeating regions that are expected to be created in the future.
In this situation, the first three Color Picker regions will work, the problem, however, is that after each creation of a repeative region the page has to be saved in order for the new region to be initialized and to work.

In other words, this is a bad decision.

I know this plugin is not official, but I believe it will be used by many users. I see we use version 1.4.0 and version 2.0.5 already exists - is the new version capable of adapting to a repeating regions?

Thanks a lot