Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
9 posts Page 1 of 1
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
color-picker.png (9.85 KiB) Viewed 4733 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 493 times

Sorry to British English speakers. ;)
@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>
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
9 posts Page 1 of 1

Who is online

In total there are 2 users online :: 0 registered, 0 hidden and 2 guests
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 2 guests