Color Picker Plus

Developer

Shoe Shine Design & Development

3rd Party (Commercial)

MIT License

EE Version Support

  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

Requirements

Add-On Type(s)

Fieldtype, Module

Tags

An advanced color picker fieldtype with preset color options and member group editing permissions. Compatible with Matrix, Low Variables, Grid, and Content Elements. Outputs HEX or RGB values.

Installation

     
  1. Copy /system/third_party/color_picker_plus/ to /system/expressionengine/third_party/
  2.  
  3. Copy /themes/third_party/color_picker_plus/ to /themes/third_party/
  4.  
  5. Install the module from Add-ons » Modules
  6.  
  7. If not included with module install, install the fieldtype from Add-ons » Fieldtypes

Template Tag

{your_field}  - 6-digit hexadecimal of your color (ex: ‘ffffff’)
{your_field:rgb} - RGB comma separted value of your color (ex: ‘255,255,255’)

With the RGB output you can apply transparency: rgba({your_field:rgb},.5)

Preferences

Modify the desired settings from Add-ons » Module (or Fieldtype) » Color Picker Plus

  • To grant a member group access to save new colors to the Quick Color squares, change the group’s setting to “Yes.”
  • To grant a member group access to reset to the default Quick Colors defined in the extension preferences, change the group’s setting to “Yes.”
  • Adjust what the default Quick Colors will be. To reset the default Quick Colors back to the fieldtype’s defaults, click the “Reset to Default Colors” button. Changes here apply to all Color Picker Plus fields/Matrix cells.
  • Users (if their member group has permission) can change the Quick Colors in the pop-up color picker. From within the pop-up, clicking “Reset to defaults” will reset to the color values defined in the module preferences.
  • Quick Color values are a 6-character hexidecimal color value. Example: bright red = hex value “ff0000”.

Usage

  • Compatible with Matrix, Low Variables, Grid, and Content Elements.
  • In the entry edit view, the field may be edited directly. Clicking the color square next to the field will open the color picker.
  • The new color can be selected by any combination of clicking in the big box on the left, adjusting the slider in the color bar, entering H/S/V, RGB, or hexidecimal (#) values, or clicking in one of the Quick Color boxes to the right. Click the “OK” button to save the new color choice in the field. Click the “Cancel” button to cancel the new color choice.
  • If the user’s member group has permission, the user can change the Quick Colors in the pop-up color picker. Choose a new color then ‘shift + click’ in any color box to save the new color. The Quick Colors are stored once for the Color Picker Plus fieldtype, and can be changed in any field’s pop-up color picker window. Clicking the “Reset to defaults” button will reset the Quick Colors to module’s preset Quick Colors.

Programming Notes

  • Color Picker Plus uses Digital Magic Productions’ jPicker jQuery plugin. http://www.digitalmagicpro.com/jPicker/
  • Since jPicker adds code to the page for each instance of the pop-up color picker, Color Picker Plus fieldtype may not scale up well if there are a large number of Color Picker Plus fields or cells in a field group and channel entry.

Color Picker Plus Links

This entry was created August 5, 2013, 9:28 am.
This entry was last updated June 1, 2020, 4:49 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

3 Reviews:

Ryan Masuga 11.25.15

Ryan Masuga
Rating - {addon_rating_average}

Probably the best color picker out there for ExpressionEngine. Ability to output as RGB allows us to let the client to pick a color and couple it with an opacity field for RGBA output. I had to “lightly hack” the add-on to get it to work with Blocks, but that took about 10 seconds.

Alex Kendrick 06.10.14

Alex Kendrick
Rating - {addon_rating_average}

The most robust color picker for EE. What really sets it apart is the compatibility with Low Variables, Matrix, Grid, and Content Elements. Great support from the developer.

Paredes Creative 12.03.13

Paredes Creative
Rating - {addon_rating_average}

A great little add-on that does exactly what it says it will do. Very good when combined with Single Entry for global website preferences.