vokseverk/vokseverk.colorselector

An Umbraco Property Editor for selecting a color - either by picking from a few defaults or by providing a specific CSS color value.

Color Selector for Umbraco

A Property Editor for selecting a color - either by picking from a few defaults or by providing a specific CSS color value.

Currently allows for 5 presets (per datatype).

Versions

• Version 1.x (Umbraco package) works in Umbraco 7 and Umbraco 8
• Version 3.x (Nuget package) works in Umbraco 10 (with .net6) and Umbraco 11 (.net7)

There is no package for Umbraco 9, as I am not able to test that configuration.

Note that you'll need to manually download the appropriate PropertyValueConverter for version 1.x, depending on which Umbraco version you have.

The Nuget package installs the PropertyValueConverter automatically.

Screenshots

Property editor

Configuration

Building

Running the build.sh script (on macOS) builds a ZIP file in the dist folder which should be installable from Umbraco 8's Packages section or Umbraco 7's Developer > Packages section.

The nuget-build.sh script is what I use to build the Nuget package.

vokseverk.colorselector's Issues

Add PropertyValue Converter

It's a pain to have to add .ToString() to the output of this whenever it's to be used in other ways as output directly to the page.

Should make sure to normalize the output (upper- or lowercase, with/without # at the beginning) - maybe according to a datatype setting?

Add more translations

I would love to provide translations for all the supported backoffice languages in Umbraco.

There are only two keys to translate so shouldn't be a massive undertaking for anyone :)

If you've never contributed to an open source project before, let me know and I'll guide you through!

Add descriptive text to the property editor

Something along the lines of:

"Input a valid CSS hex color: [             ] - or choose one of these presets: [  ] [  ] [  ]"

Tasks

• Add <localize> directives to view
• Add Lang folder
• Add en-US.xml + en-GB.xml (color vs. colour)
• Add da.xml

Reference: https://our.umbraco.com/documentation/Extending/Packages/Language-Files-For-Packages/