N2CMS Add-on: Colour Picker

07 Jun 2010

Max Zayarnyuk, our resident .Net developer, has developed Color Picker, a simple add-on for the N2CMS content management system (CMS), which is our preferred CMS for Windows based servers.

The color picker support for N2 is enforced using a new attribute [EditableColorPickerAttribute]. It has a number of useful features such as quick-and-easy installation and great cross-browser compatibility. The add-on doesn’t use pop-up windows, and is based on jscolor - a simple & user-friendly colour picker. Additional benefits of the Color Picker are that no framework (jQuery, MooTools, YUI, Dojo etc) is needed and it is appearance and behaviour are customisable.

The EditableColorPickerAttribute supports 3 boolean properties: hashSymbol, requiredValue and caps:

  • hashSymbol - adds ‘#’ symbol, default value is false
  • requiredValue - determines if the field can be left blank, default value is false
  • caps – allows you to use lowercase or uppercase, default value is true

To use simply, grab the Colour Picker here, unrar it to 'siteroot\addons\' folder and add a reference to ColorPickerAddon.dll. Mark any string property of your page class in the following ways:

[EditableColorPicker("Color", 6)], [EditableColorPicker("Color", 6, ContainerName = Tabs.Content, ....)];
[EditableColorPicker("Color", 6, true)] – add '#' symbol;
[EditableColorPicker("Color", 6, true, true)] – autofill field;
[EditableColorPicker("Color", 6, true, true, false)] – add lowercase;

Color Picker is available for download at http://n2cms.com/add-ons/Color-Picker.aspx

Have fun using it!