search

tractorcow / silverstripe-colorpicker

Silverstripe Color Picker
Other
18 stars 12 forks source link

readme

silverstripe-colorpicker

The ColorPicker Module adds a color-picker input field to the SilverStripe CMS. It makes use of the ColorPicker jQuery Plugin.

Requirements

SilverStripe Framework v4+ and v5+

For a Version that is compatible to SilverStripe 3+, consider using the 3.0 release

Installation

Install using composer

composer require tractorcow/silverstripe-colorpicker ^4@dev

Usage

Here's how you define a DB field to be a color:

private static $db = [
    'BgColor' => 'Color'
];

Alternatively, you can also use the fully qualified classname. The best way to do this is to import the class at the top of your PHP file, like so:

use TractorCow\Colorpicker\Color;
use TractorCow\Colorpicker\Forms\ColorField;

In your class, you can then use:

private static $db = [
    'BgColor' => Color::class
];

That's all... scaffolding will take care of creating the appropriate form-field.

If you use getCMSFields to create your fields yourself, you might want to do something like this:

public function getCMSFields()
{
    $fields = parent::getCMSFields();

    $fields->addFieldToTab(
        'Root.Main',
        ColorField::create('BgColor', 'Background color')
    );

    return $fields;
}

Tips for using the Color fieldtype in templates

The TractorCow\Colorpicker\Color fieldtype provides some helper methods that can be useful in templating. Let's consider the above scenario where you have a Field named 'BgColor'. The most common use-case is something like this:

<body style="background-color: #$BgColor;">
...

But there's more. You could also use CSS3 rgba color definitions with alpha. Example:

<body style="background-color: #$BgColor; background-color: $BgColor.CSSColor(0.5);">
...

This will color your background with an alpha value of 0.5 (browsers that don't support rgba, such as IE-8 will fall back to the first background-color definition, that's why it's still in there).

Here's a complete list of the Color methods available in templates: