MODx Evo: Quick CSS adjustments in Manager area

Did you ever need to make few little CSS adjustments in MODx Evo manager area without editing of the core CSS files? Say, make introtext field in document form a bit higher? If so, then maybe this little solution will be helpful. It allows to apply CSS rules placed inside a chunk.

Step 1

Create a chunk manager_css and include your styles. For example, I often feel that above mentioned introtext field is too little for my needs and my summary text is out of its range; however, I'd like to see full text without scrolling. So, in my chunk I placed a rule which makes the field's height bigger when cursor is placed inside the textarea:

textarea[name=introtext]:focus {
    height: 150px;
}

Bigger summary field

Step 2

Create a plugin ManagerCSS with following content:

$e = &$modx->Event;

if ($e->name == 'OnDocFormRender') {
    $e->output('<style>' . $modx->getChunk('manager_css') . '</style>');
}

and tick OnDocFormRender event in plugin's Configuration tab.

If everything is correct, after that you can enjoy the new look of your Manager area.

How it works?

It even doesn't need any explanation, I guess. The plugin just prints content of the CSS chunk in source code and wraps it within <style> and </style> tags. Yep, it's not compliant with W3C standards, but it just works.

This approach have limitations though. The main one is that because of iframe-based design of the MODx Manager area, only the form frame can be affected. I.e. you cannot change style of the document tree or main menu.

By on
If you want to repost this article, please keep the source hyperlink