Umbraco.ColorPicker - Have a different color for each domain

[D0LBA3B]

Hello everyone,
Context: I have a Umbraco site (13+) that uses widgets. These widgets have a background color property.
In Umbraco, I have several sub-sites that share the same widgets, but these sub-sites have different colors.

Current Picker:

Choice of colors in the widget:

How can I distinguish the colors in relation to the sub-sites?
It might be useful to link a color to a domain, so that the color picker is different for each sub-domain.

[nackler]

I did something similar with domain-specific settings -- not colors, but the idea is the same.

Add a settings document (no template) in the root of your site where color/subsite relationships are configured in the backoffice as pairs of color/domain-name values. Then when your widget is rendering, call a utility from the view that finds that settings document in the content tree, then loops through the configured colors trying to match the domain from the http request with the domain-name in the settings document.

If, for some reason you need to look up the assigned domain bindings of the subsite nodes, you can do that using an injected umbraco IDomainService.

Let me know if you need examples of any of this.

[enkelmedia]

Data Type configuration variants :) I've never missed this, but after reading the proposal I realized that we might have a project in the near future where we'd need a different color palette depending on the root note.

Not sure that this is a super common use case but I would really like to know more about how @nackler solve it?

[nackler]

If you have multiple root nodes, then it seems like you could add a color property to each one then on any view, call
something like this:

 <div style="background-color:@ViewUtility.GetColorForRootNode(this.Umbraco)"><div>

public static class ViewUtility{
    public static GetColorForRootNode(UmbracoHelper umbracoHelper){
        var rootNodeForCurrentPage = (MyRootNodePageType)umbracoHelper.AssignedContentItem.Root();
        return rootNodeForCurrentPage.MyColorProperty
    }
}

[enkelmedia]

Thanks! But this would not solve the problem with allowing editors to pick different colors eg. If I have a color picker on a block and would like the pickable colors to be different depending on the root node.

[hfloyd]

@enkelmedia - Oops - put it into the wrong 'thread"... but take a look here - #17216 (reply in thread)

[marcemarc]

@enkelmedia with V13 + Contentment you could create a Pretty Contentment DataList with a custom IDataListSource, and the trick was to use the EditorModel SendingContent notification to place the current page ID into a session variable (I know!) - then the custom IDataListSource could read the value of that ID from the session and use it to find the site the page was being created on, and read a set of brand colours on that homepage as the ones to use as the custom data list source for editors to select from... The same block can be used across multiple sites and the colour options for the editor are updated to reflect the context of the site the page is created on.

But have been trying to think how to do something similar in v14+ without the EditorModel SendingContent hack..

[marcemarc]

I love it! Thanks for sharing your awesome hack!

This is interesting, I’ll try to think of a way - and for sure share it if I come up with something. Not actively working on it at the moment so might take a while.

A @hfloyd hack!

[marcemarc]

It could be done with Contentment without the hack. 😗👌

Using the List Items editor on a site/root document to define the colour values. Then configure a Data List editor to use the Umbraco Content Property Values data-source, configured to query the List Item values from the site/root document.

...and if you don't want to use one of the built-in Data List list-editors, then custom markup (AngularJS template) can be used with the Templated List list-editor, or roll your own custom list-editor.

ooh fixed indeed in V5 of contentment - leekelleher/umbraco-contentment#389 - so that should work for Umbraco V15?

[leekelleher]

Contentment v5 is for Umbraco v13.
Contentment v6 will be for Umbraco v15 (which I'm working on at this very moment), the previous v6 alphas did target Umbraco v14.

re: ContentmentContentContext, that might not be needed in v6, as I've re-engineered Data List to work a little differently, (again still working on that at the moment). 😅

[marcemarc]

Thanks @leekelleher it's one of my 'todo slides' for 'who grated my cheese?'

so have been pondering 'how'

[hfloyd]

I have a way of doing just this - having multiple sites with their own defined lists of colors for selecting. I feel like I've written it up before, but maybe not... In my version, I'm using JSON files to define the lists of colors, and the site's node provides the "theme" name, which determines which JSON file is used to supply the color list to a Contentment Datalist, with a custom template providing a UI like this:

(Multiple sites - same installation)

If this is what you are looking for, I can elaborate.