Some time ago we released an Umbraco package named Palette Picker, which allows editors to select a customized colour palette on content nodes, and apply the CSS styles associated with the palette.

You can read more about it in our Package Page, or in our Blog Post. It is also available to download from Nuget and Our.

It was created out of a specific need we had for a particular project which evolved in a natural way into an Umbraco package.

The package covered the needs we had initially and presented itself as a good user experience data type. But, of course, we thought its functionality could be extended and even polished. As a result of this, we started reviewing the package, adding issues to our gitHub project page, and even getting suggestions from external users.

After some time we decided to implement new functionality and come up with an updated, more attractive, user-friendly and useful version of the package.

Palette Providers

A very interesting feature that was long sought after. Since the package was born, we had in mind the possibility of making the package extendable. The palette editor configuration was limited to a unique source (paletton.com). We have done a major refactoring to allow multiple providers. Developers can now create and add their own custom providers to the package. Providers are in the form of an AngularJs component formed by a view, a controller, and optional stylesheet(s). Once the component is added, it is automatically available to use in the data type configuration. The provider is responsible for translating the source content to a standard palette object.

As it was required for this upgrade, we have also changed the format of the palette values, so they are saved as a standard object instead of a custom one. Users who upgrade to this new version might need to resave their data types.

Palette Color Selector

This is an actually requested feature.

It consists of a new data type added to the package. It allows editors to pick a colour out of an existing palette from a given node. This is a dynamic colour picker, meaning that when the referenced palette changes, the available colours and the actual selected colour of the picker change accordingly.

The reference palette is defined as a configuration value of the data type, and it allows us to pick a fixed node, or a node queried via XPath, quite similarly to a MultiNodeTreePicker. This second option is particularly helpful as it allows us to pick a current, parent, site or root node, using XPath.

Colour fine tuning

Previously, when we added a palette configuration to our palette picker data type, we couldn't really change the range of colours in a friendly way: we had to manually change the attached XML (we were assuming anyone editing it would be able to read and write XML), which resulted tedious and not visually easy to modify. So we have made the colours editable in the form of standard colour pickers. Each one of the colours of the palette can be quickly adjusted by simply clicking on them and selecting the desired colour.

Prefix and parent class

The original functionality of the package was for us to be able to add a customized stylesheet to pages based on a selected (and editable) palette of colours. Id adds the appropriate CSS rules as:

where "primary-0" is the id of the specific colour.

In this new version, we have added the possibility of adding a prefix or a parent class as part of the property value, so the rendered CSS rules will contain them. Then the styles can be applied to more specific components inside our views, limiting them to elements being contained inside a parent class or with the specified prefix. It can be particularly useful for documents where we need to define several different colour palettes for different elements. For instance, we might define a colour palette for the general body of the page, and then a different one for a highlighted section which colour profile is likely to change over time.

The CSS rules, if using a prefix and a parent class, would now be as:

Next Steps

There are still some features that we think are interesting and will help get more value out of the package, and we will be adding them to future versions. We also appreciate suggestions and requests from those users and developers who might be interested in the package.