Coloured icons in the resource browser

General
1

Is there an option to be able to colour the icons in the resource browser? I find users get really confused with the italicized, half faded, faded and italicized resource statuses.
Being able to change the icon for resources using different templates is great but does not help the user out a lot

2

immagine
immagine472×709 27.6 KB

To obtain something like in the image above I did the following:

  • crate my theme for manager
  • modificate header.tpl for add myManagerCss.css
  • create myManagerCss.css with this classes
#modx-resource-tree .x-tree-node-el {
	color: #31810A;
}
.hidemenu a span, 
.hidemenu a span.hidemenu, 
.hidemenu a span.hidemenu a span {
	color: #798a9b !important;
    font-style: italic;
}
.hidemenu i.icon {
	color: #31810A !important;
	opacity:.63 !important;
}
.hidemenu i.x-tree-elbow-plus,
.hidemenu i.x-tree-elbow-minus{
	color: #31810A !important;
	opacity:.63 !important;
}
.unpublished a span{
    color: #a21919 !important;
	font-style:normal;
	opacity:.8;
}
.unpublished i.icon {
    color: #a21919 !important;
	opacity:.8;
}
.unpublished.hidemenu a span {
    color: #9b5050 !important;
	font-style:italic;
}
1 Like
3

very slick!

Though I think it could also be written as a plugin that could have a config or manager page to manage styles as well.

1 Like
4

As someone who is color blind, particular shades of red and green are hard to distinguish between. I can, but it takes really careful attention. I recently did something similar based on a plugin that Jay Gilmore made here: Usability Issue with Determining Unpublished vs Hidden · Issue #16465 · modxcms/revolution · GitHub

I’ll see if we can get it bundled up and pushed to the Extras.

5

Yes my color it’s for me, not all respect WCAG AA Accessibility.
I just showed how I did it, then in the css classes everyone can put the colors they prefer, especially for unpublishe and no menus that do not respect WCAG AA Accessibility

6

Here’s the plugin that Jay created that uses CSS varialbes for determining colors, and looks like this:

image
image578×450 25.3 KB

Don’t forget to check the onManagerPageBeforeRender event!

/**
 * 
 * osTreeStyles Plugin
 * A Plugin to use the old-school Revo 2.x Tree Styles
 * Also slightly improves node contrast ratios
 * Fires on the MODX system event onManagerPageBeforeRender
 * @author Jay Gilmore (smashingred)
 * @created 2025-02-07
 *
 * For discussions, see https://github.com/modxcms/revolution/issues/16465
 * TL;DR: hidden = light color     unpublished = italic (+ light color?)
 */

/* @var $modx modX */
/* @var $scriptProperties array */

$eventName = $modx->event->name;

switch ($eventName) {
    case 'OnManagerPageBeforeRender':

        $css = '
#modx-leftbar .icon,
.x-tree-node .icon {
    opacity: 1;
}

.x-tree-node {
    color: #333;
    opactity: 1;
    font-style: normal;

    --color-main: #333;

    --opacity-hidemenu: 0.75;
    --font-style-hidemenu: normal;

    --opacity-unpublished: 0.6;
    --font-style-unpublished: italic;

    --color-deleted: #f00;
    --opacity-deleted: 1;
    --opacity-deleted-icon: 0.333;
    --font-style-deleted: var(--font-style-unpublished);    
}
.x-tree-node a span {
    color: inherit !important;
    opacity: inherit !important;
    font-style: inherit !important;
}
.x-tree-node i.icon,
.x-tree-node i.icon-large,
.x-tree-node a span i.icon,
.x-tree-node a span i.icon-large {
    color: inherit;
    opacity: inherit;
    font-style: normal;
    position: relative;
}
.x-tree-node .hidemenu:not(.unpublished) i.icon,
.x-tree-node .hidemenu i.icon-large {
    color: var(--color-main) !important;
    opacity: 1;
}
.x-tree-node .deleted i.icon,
.x-tree-node .deleted i.icon-large {
    color: var(--color-deleted) !important;
    opacity: var(--opacity-deleted-icon) !important;
}

.x-tree-node .hidemenu,
.x-tree-node .hidemenu a span {
    opacity: var(--opacity-hidemenu) !important;
    font-style: inherit !important;
}
.x-tree-node .unpublished,
.x-tree-node .unpublished a span {
    opacity: var(--opacity-unpublished) !important;
    font-style: var(--font-style-unpublished) !important;
}
.x-tree-node .deleted,
.x-tree-node .deleted a span {
    color: var(--color-deleted) !important;
    opacity: var(--opacity-deleted) !important;
    font-style: var(--font-style-deleted) !important;
}
.x-dd-drag-ghost a span,
.x-dd-drag-ghost a {
    color: var(--color-main) !important;
    font-style: inherit !important;
}
';
        $html = '<style>'.preg_replace( '/\s+/', ' ', $css).'</style>';
        $modx->controller->addHtml($html);
        break;
}
4 Likes