About ColorPicker

Fieldtype that stores a HEX color. Color can be picked using a jQuery ColorPicker Plugin.

Category 1Field Types
Fieldtype modules that represent a data type used by fields.
Category 2Input Fields
Inputfield modules that provide a UI input widget in the ProcessWire admin.
Release StateStable
Should be safe for use in production environments. *
Authorsoma
Module Version2.0.1
Class NameFieldtypeColorPicker
Compatibility2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7
Date AddedJuly 24, 2012
Last UpdatedJuly 20, 2015
Recommended ByNew recommendations may take up to 1 day to appear.

Details

pw-colorpicker.jpg

ColorPicker jQuery plugin used: eyecon colorpicker

Instructions

This module's files should be placed in /site/modules/FieldtypeColorPicker/
How to install or uninstall modules

README

ColorPicker 2.0.0

Custom Fieldtype/Inputfield for ProcessWire 2.+

This module gives you a new custom Fieldtype. Let's you select a color using a Colorpicker jQuery Plugin. The color selected will be stored in HEX format uppercase: "EAEAEA";

When creating a new field in the admin, you can set a default value. The default value will be set when creating a new page, and it will also be used for empty fields.

The field supports a transparent value. In the field setting you can use the name "transp" to define it. When output formatting (2.0.0) of the field is enabled, the field will return "transparent" in template code.

The field supports a "reset" button to be able to set it back to the default value.

How to use it

To use it in your template as a background HEX color, you'd simple output the value and prefix it with a #:

echo "background-color: #" . $page->color;

Since of 2.0.0 you can enable output formatting of the field in the details settings. When enabled it will format value directly from AADDEE to "#AADDEE" and "transp" to "transparent".

echo "background-color: " . $page->color;

The colorpicker used: ColorPicker jQuery Plugin by Eyecon

Changelog

2.0.1

  • Fixed default "000000" value issue in Fieldtype

2.0.0

  • Added output formatting option to format values with prefix "#" when output in template code.
  • Added checks for "0" values and returning them as "000000", just in case ProcessWire converts them to 0.

1.0.8

  • some maintenance, remove

    not needed

  • remove overflow: auto_ colorpicker css fix input with box sizing coming from new admin theme

1.0.7

  • fixed typecasting bug: when a color value is numeric it should betypecasted to string. This prevents the color picker window from not being launched. @Rayden
  • fixed small visualisation issue with the color swatch preventing abox collapse with css. @Rayden

1.0.6

  • added support for color swatches for easy predefining and selecting color values @Rayden
  • added "transp" support for a transparent value (empty)

1.0.5

  • fix bug with default value

1.0.4

  • fix bug when used in repeaters

1.0.3

  • added support for default value
  • added reset link to set back to default color

1.0.2

  • Fixed issue with colorpicker not working when used in tabs

1.0.1

  • Remove lots of code not needed. Cleanup.

1.0.0

  • Initial Stable Release.

How to install:

  • Download the contents of this repository and put the folder renamed as "ColorPicker" into your site/modules/ folder
  • Login to processwire and got to Modules page and click "Check for new modules". You should see a note that two new modules were found. Install the FieldtypeColorPicker module under "Field" section. This will also install the required InputfieldColorPicker at the same time.
  • Done
  • You can now create a new field with the "ColorPicker" Fieldtype.

Comments

  • Daniel Quinn

    Daniel Quinn 4 years ago 00

    It should be noted that the instructions for the module on this page are contradictory: the module has to be put in a folder called ColorPicker under /modules/, not "/site/modules/FieldtypeColorPicker/" as it notes earlier on this page, otherwise the module fails to find its own assets at the JS breaks the PW admin.

  • PawelGIX

    PawelGIX 2 years ago 40

    Please add support for RGBA colors

  • Jee

    Jee 1 year ago 00

    Working with the dev 3.x ?

    • Sérgio Jardim

      Sérgio Jardim 10 months ago 00

      Yes, it's working on 3.x!

  • Moebius

    Moebius 5 months ago 30

    ProcessWire 3.0.27 devns, not working in repeater

  • Roych

    Roych 1 month ago 00

    Version 2.0.1 not working in repeater in ProcessWire 3.0.42 MASTER. Any Fixes for this? Thx.

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.