MODX Evolution: Manager Restyle Project

I would like to restyle and modernize MODX Evolution Manager.

Why modernize the Manager?

The idea for this restyling project comes from Bringing Evo back to life again Thread.

The Plan

My plan is to make a complete restyle of MODX Evolution Login, Manager and Installation pages. At first I'll make only screenshots and wait for feedback, later when we reach an agreement I would like to make a plain html/css/jQuery/jQuery UI template of each page. I don't have the knowledge to modify the Manager myself, so someone which is working on the development side would have to implement the changes.

Feedback and help

Any feedback or help is more than welcome. Also, let me know if this is a good idea or not, meaning: is this the right way of doing this, or there are other solutions?


Login (Screenshots)

Demo 1 - Suitable for white logo on black background.
Demo 2 - Suitable for white logo on black background.
Demo 3 - Suitable for black logo on white background.
Demo 4 - Suitable for black logo on white background.

Installation (Screenshots)

Demo 1 - Step 1
Demo 2 - Step 2
Demo 3 - Step 3

Manager (Screenshots)

Demo 1 - Manager with tabs
Demo 2 - Manager with tabs - with small difference on the top of the tree menu
Demo 3 - Manager with dropdown menu
Demo 4 - Manager with dropdown menu

Demo website (Screenshots)

Demo 1 - My first attempt for a demo website.


Manager (HTML)

Demo 1 - Try it! (tested on firefox for now):
- Main Menu, Tabbed navigation
- Tree Menu, try to expand and collapse the menu
- Tree Menu, try to expand all and see all icons I've created. Icons are on a css sprite
- Tree Menu, try to sort the site tree (the sort order does not work, just to see the popup)
- Tree Menu, try to collapse the tree frame
- Tree Menu, try the context menu
- Tree Menu, try trash bin, a popup should open (I'd like to open it on the parent frame, if possible)
- Tree Menu, "show more" and "pagination" links

- Forms
- Action Buttons
- Tabs
- More to come... [ed. note: microcipcip last edited this post 11 years, 11 months ago.]

One thing I have done in my branch of my repository is to move the "manager" templates out of the assets/templates folder and into manager/media/style/themeName/templates. I did this because if you modify any of these in the assets/templates/manager/ folder, upgrades will overwrite them. There is no way to specify a different set of template files that an upgrade won't overwrite.

With them in the manager/media/styles/themeName/templates folder, however, if you want to customize them just clone that themeName folder, customize away, then in the Configuration select that new theme. Now you can upgrade all day and it won't overwrite your customizations.

very nice

i like the first one: http://www.jertix.org/demo/modxlogin/index01.htm

I had initially fixed a bug in ManagerManager when manually specifying a source for the jQuery library by editing the mm.include.php file to use $js_src_type instead of $js_src_override. But it seems more elegant to me to add a line in the Manager's plugin code to set the $js_src_override value than to hack the mm class code.

So in the beginning of the plugin's code in the Manager you'll now have


(forum tries to make a link out of a URL even if it's in a code block!) [ed. note: sottwell last edited this post 12 years ago.]

Quote from: sharkbait at Apr 02, 2012, 04:10 PM

i like the first one: http://www.jertix.org/demo/modxlogin/index01.htm

Ooh! That's nice! Definitely that first one!

I'm also trying to come up with a better demo template and updated content for a demo site, but unfortunately I'm no designer. So I'll see about updating the content, but I'll leave coming up with a nice demo template to those who have more skills in that area than I.

I like the first one, too.

All of them is very good art work.

I like the Susans ideas about separation of standard and custom designs. That sound very reasonable to me.

I like them all, too.

Fantastic designs microcipcip.
I absolutely love Demo 1, it's really slick and minimal.
Well done.

One thing I have done in my branch of my repository is to move the "manager" templates out of the assets/templates folder and into manager/media/style/themeName/templates.

Great thinking Sottwell. Consolidating into the one area is the go.

Straight to the designs - I like all of them

Now the security freak:

As with any Open Source product the code is open to a huge amount of hackers looking for elements that are bespoke to individual systems.

So far as I have read, with Revo the admin area can be installed outside of the root - would that be possible to adapt for Evo

I have personally removed all mentions of MODx from my login form and redesigned it to a clean simple straight forward look

Thanks everyone for the feedback, I'll keep working on this and I will also try to make a demo template. What features will be added to the demo?

It seems that for the Login "Demo 1" is the favourite, so that could be the default template and the others could be pre-installed somewhere or available from the extras section.

Quote from: sottwell at Apr 02, 2012, 04:06 PM

One thing I have done in my branch of my repository is to move the "manager" templates out of the assets/templates folder and into manager/media/style/themeName/templates. I did this because if you modify any of these in the assets/templates/manager/ folder, upgrades will overwrite them. There is no way to specify a different set of template files that an upgrade won't overwrite.

With them in the manager/media/styles/themeName/templates folder, however, if you want to customize them just clone that themeName folder, customize away, then in the Configuration select that new theme. Now you can upgrade all day and it won't overwrite your customizations.

Susan, you read my mind! I have been thinking about this improvement since I started the design process. That's the way it should work, thanks for taking the time to change this.