Try our conversational search powered by Generative AI!

Steve Celius
May 25, 2015
(2 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:

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

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

        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


Ben  McKernan
Ben McKernan May 26, 2015 10:18 AM

Nice, I like it! Regarding you disclaimer, the color palette widget has two predefined palettes. You can easily switch to the other more restrictive palette with the following.

[ClientEditor(ClientEditingClass = "dijit/ColorPalette", EditorConfiguration = "{\"palette\": \"3x4\"}")]

If you want to have complete customization then you would need to create some sort of attribute or editor descriptor where you send the specific colors as a palette to the widget.

May 26, 2015 11:02 AM

Nice Ben, that was easy. I have had a look at the Palette docs ( and it looks powerful. I'll have to leave that implementation for someone else :-)

Please login to comment.
Latest blogs
Fix your Search & Navigation (Find) indexing job, please

Once upon a time, a colleague asked me to look into a customer database with weird spikes in database log usage. (You might start to wonder why I a...

Quan Mai | Apr 17, 2024 | Syndicated blog

The A/A Test: What You Need to Know

Sure, we all know what an A/B test can do. But what is an A/A test? How is it different? With an A/B test, we know that we can take a webpage (our...

Lindsey Rogers | Apr 15, 2024

.Net Core Timezone ID's Windows vs Linux

Hey all, First post here and I would like to talk about Timezone ID's and How Windows and Linux systems use different IDs. We currently run a .NET...

sheider | Apr 15, 2024

What's new in Language Manager 5.3.0

In Language Manager (LM) version 5.2.0, we added an option in appsettings.json called TranslateOrCopyContentAreaChildrenBlockForTypes . It does...

Quoc Anh Nguyen | Apr 15, 2024