World is now on Opti ID! Learn more

Steve Celius
May 25, 2015
  6134
(0 votes)

Simple color picker property

Lets say you wanted a simple block to show a title, just to let your editors break up a long content area with some contextual spacing. Simple stuff. However, you want to let the editor decide the background color, and that means the editor need to be able to change the text color too, or you might end up with black text on a black background. A couple of text fields will handle that.

Looking good:

Image Title Block Preview.png

And the editorial experience?

Image Title Block All Properties - Bad.png

Come on - knowing CSS color codes by hand is not that hard, is it? What if it could look like this:

Image Title Block All Properties.png

With the power of Dojo, this is amazingly simple:

[ContentType(
        DisplayName = "Title",
        Description = "Title with styling options",
        GroupName="Content")]
[SiteImageUrl(thumbnail: EditorThumbnail.Content)]
public class TitleBlock : SiteBlockData
{
    [Display(
      GroupName = SystemTabNames.Content,
      Order = 10)]
    [CultureSpecific]
    public virtual string Title{ get; set; }

    [Display(
        GroupName = SystemTabNames.Content,
        Name = "Text Color",
        Order = 50)]
    [ClientEditor(ClientEditingClass = "dijit/ColorPalette")]
    public virtual string TextColor { get; set; }

    [Display(
        GroupName = SystemTabNames.Content,
        Name = "Background Color",
        Order = 60)]
    [ClientEditor(ClientEditingClass = "dijit/ColorPalette")]
    public virtual string TextBackgroundColor { get; set; }
}

The magic is to specify the client editing class as "dijit/ColorPalette". That's it. This particular widget is a built-in one, and we can use it without having to do anything else.

For good measure, I hid a couple of more advanced properties on the Settings tab:

Image Title Block All Properties - Settings.png

At least I'm giving some advice by using the description for the property.

Disclaimer! I haven't found a way to limit or specify what colors the palette should show, and depending on your design, this is like giving editors access to Comic Sans. Use responsively.

May 25, 2015

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |