Last updated February 12, 2017. Created on November 4, 2011.
Edited by Jaypan, plopesc. Log in to edit this page.

Concept

This module creates a new Form API element type: colorpicker, which relies on the 3rd party integration of the jquery colorpicker. After enabling this module and downloading the relevant files from the site linked above, a new form element can be created.

A Field API field is also created that can be attached to any fieldable entity.

This will automatically place the colorpicker into the form, allowing users of the form to choose a color from the jquery colorpicker.

Installation Instructions

  1. Install the module as you would any other Drupal module
  2. D7 only: Install the Libraries module
  3. Go to www.eyecon.ro/colorpicker/ and download colorpicker.zip.
  4. Extract the files in the following locations.

    Drupal 7:

    • Extract the following three folders from the zip file to the folder /sites/all/libraries/colorpicker.
      • css
      • js
      • images
    • If you have extracted the contents right, the following filepath should exist: /sites/all/libraries/colorpicker/js/colorpicker.js

    Drupal 8:

    • Extract the following three folders from the zip file to the folder /libraries/jquery_colorpicker.
      • css
      • js
      • images
    • If you have extracted the contents right, the following filepath should exist: /libraries/jquery_colorpicker/js/colorpicker.js

Usage

After installation, fields can be attached to entities the same as any with any field type.

Form elements can be created with the Form API using the following code:

$form['element'] = array(
  '#type' => 'jquery_colorpicker',
  '#title' => t('Color'),
  '#default_value' => 'FFFFFF',
);

Javascript Degradation

This module is set to gracefully degrade to an input type text if the user has javascript turned off. The field will require a 6 digit hexadecimal color code to be inputted.

Alternatives

You may also want to check out the Colorpicker module which does essentially the same thing using the Farbtastic javascript library.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.