World is now on Opti ID! Learn more

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

[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

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.

Steve Celius
Steve Celius May 26, 2015 11:02 AM

Nice Ben, that was easy. I have had a look at the Palette docs (http://dojotoolkit.org/reference-guide/1.10/dojox/color/Palette.html) and it looks powerful. I'll have to leave that implementation for someone else :-)

Please login to comment.
Latest blogs
Open Optimizely CMS in a New Tab – Instantly

Speed up your Optimizely CMS workflow with this free Chrome Extension. Instantly open the live view of the page you're editing – no right click, op...

Andy Blyth | Jul 18, 2025 |

Creating Quick Actions for ContentReference Images with a Custom Dojo Module

Credit note: This article is inspired by the  edit link in dojo  module, with extra features added. We received a request from our customer to...

Manoj Kumawat | Jul 18, 2025

Password protect your Optimizely CMS content

Want to share some private content on your website with basic password protection? You can do this with an Optimizely form and Audience based...

Brian Gerby | Jul 17, 2025 |

Importing Form Submission Data into Optimizely Forms Using DdsPermanentStorage

Recently, we needed to import a large number of records from a third-party system into Optimizely Forms . The data was available in CSV format, and...

Pawan Singh | Jul 16, 2025