Umbraco-cms: Idea: Could we limit the use of colors on Document Types

[nielslyngsoe]

I'm unsure about the practical use of colors for the icon of Content Nodes. From a visual standpoint, it often looks messy with the different colors and I have rarely seen a good use case.
As well colors make it hard for us to see the status symbol that sometimes is added on top of icons, and thereby it limits the options we have in terms of applying further info into or around a node in the tree view.
Therefore I feel we should limit the available colors, make the option to pick a color less obvious or maybe even remove the possibility to do so.
We would still keep the technical ability to color them, for packages to be able to do so.

Let's discuss opinions and views.

(this issue is mostly meant as a topic for an HQ Discussion, but comments and insights are welcome, as always 😀)

[prjseal]

I use different colours for document type icons all the time. Being able to change the colours is so useful. For example I make all of my compositions pink, my elements green, then usually my pages blue, but some pages might be grey to show they are system pages like xml sitemap where there don’t need editing etc and I want them to not stand out. Also if I want to use the same icon, maybe the link icon, I can do so and just give it a different colour. Please don’t take away the colours or limit them. Just because you’re unsure about the need for them, it doesn’t mean we are.

Here is an example where you have to choose the child doc types, the colours really help.

[nielslyngsoe]

Hi @prjseal

Thanks for your insight, can I ask you to share a screenshot of how colors are used in the Tree?

Thanks

[prjseal]

Sure here is a screenshot of the content tree on this small site.

[nielslyngsoe]

@prjseal thanks, great scenario.
Do you have any scenarios, in relation to Content Nodes, where colors are begin used more extensively?

[dawoe]

Hi @nielslyngsoe

We use different colors as well.

All items that can be rendered in the website get the default black color. I don't see need for giving different page types different colors. That's why we have icons.

Items that can not be rendered in the page get a different color for example purple.

So usually it is only 2 colors we use.

But on some occassions it can be more. For example when there are no good icons for overview and detail pages. In that case we use the same icon. And give the detail page a different color than the overview. This helps the editor distinguish the two.

So in short keep the option. But maybe add some colors that match the color pallete of the backoffice a little bit more.

Dave

[deMD]

Keep the colors. I have been using them extensively for a while now, and clients are really grateful in general as it makes is easier for them to differentiate the different content types. I use them in the same way @prjseal does and it really makes navigating content easier.

[liamlaverty]

As well colors make it hard for us to see the status symbol that sometimes is added on top of icons,

@nielslyngsoe, might be worth looking into yiq available in bootstrap, which gets the inversion of the colour for those status symbol icons (whether the colours are removed or not it's worth a look):

color: color-yiq(#000); // returns 'color: #fff;'  

You can get automatically contrasted colours for the border of the icon, for example:

@userSelectedIconColor: #000;
@umbracoIconBackgroundColor: #2152A3;
@userSelectedIconBorder: color-yiq(@userSelectedIconColor);

.doc-type-icon {
    color: @umbracoIconBackgroundColor;
}

.umb-status-icon {
    border: 1px solid  @userSelectedIconBorder; // returns ' 1px solid color: #fff;'  
    background-color: @umbracoIconBackgroundColor;
}

Not certain how to apply in this scenario, but it seems like it'd be handy.

[kjac]

Bit late to the party here but I'll join the chorus: Keep the colors 🙏 they may not always be beautiful in the content tree, but they are super practical to communicate various content usage to the editors.

[nielslyngsoe]

Thanks for all your inputs, always great to get some insights into how things are begin used.
How do you feel about if the current colors were adjusted slightly? Basically tinted a bit to match the current color scheme? Meaning red would still be red but a different red?

[deMD]

I think changing the colors to match the color scheme would be good. Does make it all match better.

[nielslyngsoe]

We are not ready to minimizing the color palette just jet. But we might adjust the current colors slightly.

In terms of making sure colors are used with intentions, I suggest that we hide the color options in a color-picker button.

Closing this thread and continuing with an up-for-graps feature here: https://github.com/umbraco/Umbraco-CMS/issues/7455