New ProcessWire admin theme on dev branch

[ryan 14,799]

Lately there have been lots of people that are not enjoying the default admin theme, so we've been working on making something new. Not trying to solve all issues or add every new feature we'd like, but just trying to come up with something to have as an interim replacement for the default admin theme until we can afford the time to do something broader in scope (like Phillip Reiner's great admin theme design for example). So this theme doesn't necessarily break a lot of new ground, but hopefully has some of the improvements that people are looking for. Visually, the goal here was to find a lighter, more modern look and reduce the boxes-in-boxes feel of the current admin theme. 

I've opted to commit it to the dev branch because it requires the latest version of ProcessWire on the dev branch, and likely will continue to with updates. Meaning, I can't distribute this one as a 3rd party theme very easily. This is because I'm making core updates related to the admin theme at the same time. So if you want to help test this new theme, you'll need to grab the dev branch of ProcessWire. 

The new admin theme is in /site-default/templates-admin/. That means you'll see it as the default theme if you are installing a new copy of PW. But if upgrading an existing copy, you'll continue to get the old theme. If you want the new theme, then just copy the /site-default/templates-admin/ directory to your /site/templates-admin/ directory on your existing PW install. This would be in addition to replacing your /wire/ directory with the latest one from dev, as usual for PW upgrades.

The existing default admin theme also remains in place in /wire/templates-admin/. So if you want to stick with the existing/stable admin theme, then just make sure you don't have a /site/templates-admin/ dir in place (unless you are using a 3rd party admin theme). 

This admin theme is probably not production ready, as it's not been tested in many browsers yet. I personally haven't yet tested it in anything but Chrome and Firefox in OS X. Please let me know if you experience issues in other browsers. I fully expect things won't be pretty in IE... but they never are.

To start, this comes with 3 color schemes (though we'll be adding more too): 

 

Warm: 

 

   

 

Modern (similar to processwire.com site colors): 

 

   

 

Classic (similar to existing admin theme colors):

 

   

 

To switch to one color theme or the other, specify a GET variable of 'colors' in any 

URL you are accessing in the admin:

• /processwire/?colors=warm
• /processwire/?colors=modern
• /processwire/?colors=classic

To specify a default, edit your /site/config.php and set to one of the 

following:

$config->adminThemeColors = 'warm';
$config->adminThemeColors = 'modern';
$config->adminThemeColors = 'classic';

We'll probably make this switchable in the user profile at some point, but that comes later. 

This theme also comes with some new features (most of which have been copied/inspired from the work of others here, whether in other admin themes, modules or designs):

It now uses Font-Awesome icons rather than jQuery UI icons. We now only use jQuery UI icons for actual jQuery UI widgets. Note that asmSelect and our file/image inputfields are built as jQuery UI widgets, but I don't think anything else is. Basically, the majority of icons in the system are now Font-Awesome icons. 

You can associate Font Awesome icons with templates. When associated with a template, the icons will appear in the page list, in front of the page title. To use this, edit any template and go to the Advanced tab. In the "List of fields to show in admin page list", you can type in any Font Awesome icon name (in addition to the field names you could before). For example, in the Page List screenshots above, I have my "search" template configured with the value: "icon-search title". 

You can associate Font Awesome icons with fields. When associated with a field, the icon will appear at the beginning of the input. For example, I associated a coffee icon with my "title" field in the screenshot below. To do this, edit the field, click on the Advanced tab, and enter the icon name in the new field provided for it. 

The top navigation now supports simple dropdowns. A new "user" dropdown has also been added that contains profile and logout links. 

The main Pages screen contains an "add new..." button, that is itself a dropdown to a list of templates that are configured adequately for us to know where they would be added. To use this, you have to configure your template "family" settings. 

The search box is now ajax powered, though this was introduced a couple weeks ago in the existing admin theme too. 

The theme is responsive too, of course. 

This is all kind of preliminary and open to changes. I'm trying to keep the scope of the project fairly small since I don't have much time to work on it. But just wanted something to quiet the haters a bit for a little while, so that we can take our time on the bigger admin theme project for longer term. We'd appreciate your feedback if anyone has time to help test. 

[arjen 1,173]

Absolutely love the Classic colours and theme. To me these are the ProcessWire colours.

[Manol 117]

I like admin default colours but totally agree that it has a boxy look when you get lots of inputFields. If the new theme solves that problem it would be a great enhancement. 

[Pete 3,456]

Like it - nice additions

One thing I was thinking about a while back was being able to maybe use a colorpicker to select 3-4 primary colours and have a module save those to a CSS file so the admin colours could be changed easily. Might be something worth considering time-permitting? Obviously you can end up with some pretty garish colour schemes that way so would be one for superusers to control I think.

[adrian 9,754]

Hey Ryan,

I am no designer, so take my comments with a grain of salt, but I like the warm color scheme the best - it looks great!

The one change I would like to see is the implementation of a sidebar rather than top tabs like the ERGO theme has, but similar to onjegolder's modification: http://processwire.com/talk/topic/1856-release-ergo-admin-template/?p=43471

I love the way the left sidebar tree is expandable for quicker access to items under setup. Of course this could also be done by making the setup menu a dropdown menu (sorry, I see you have already done this - NICE!), but I still prefer sidebars - given our modern widescreen aspect ratios it seems a better use of space. Also, and maybe this is just me, I have always found it easier to move the mouse left and right, rather than up and down - hence I have my OS dock/taskbar on the side, rather than on the bottom. Maybe we need a real UI expert to chime in

Maybe a little off-topic, but I have also been wondering if maybe it is time to have a new "Tools" item in addition to "Setup" where modules can place their interfaces if it would be more appropriate.

[Radek 105]

Hi Ryan, great work, i like cleaner look and feel.

I am testing new theme in Firefox 24. I have issue with top dropdown menu. When i hover tob bar menu item, dropdown menu is shown without problem, but i cant focus any dropdown items with mouse (always dissapears).

[Martijn Geerts 3,204]

I love it. ( also love font-awesome )

[ryan 14,799]

I like admin default colours but totally agree that it has a boxy look when you get lots of inputFields. If the new theme solves that problem it would be a great enhancement. 

I think it kind of depends on the situation. There are many situations where I like how defined the boxes are, even if they are boxy. That's why the default admin theme hasn't changed much since the beginning. In other cases, I like the borders to be more faint, like what's in this theme. I think most people probably prefer the lighter look that. Ultimately, this theme will support either, but in the interest of keeping the scope small, I'm probably just going to focus on the lighter color schemes with this, and continue to use the old admin theme for situations where I want the boxes. 

One thing I was thinking about a while back was being able to maybe use a colorpicker to select 3-4 primary colours and have a module save those to a CSS file so the admin colours could be changed easily. Might be something worth considering time-permitting? 

Time is not permitting but this theme was built out with all the color definitions as SASS variables, so changing out the color theme is pretty simple already, but still a developers task. I'm just going to focus on getting a few good color schemes out there as choices, and I think the longer-term/bigger admin theme project should potentially pursue the ability to change colors in the admin. But probably not this project. 

I am no designer, so take my comments with a grain of salt, but I like the warm color scheme the best - it looks great!

Thanks, that's my favorite one too. I've been looking the PW blue palettes for too long. But I'm going to continue tweaking all the palettes and adding a couple more (one will be based on Nikola's Futura Remixed color scheme). If anyone here with a good eye for colors sees anything that looks amiss, please suggest changes. Though try out the actual theme, as my screenshots are a little off with the colors (I've got some weird color profile settings to deal with one of these Dell high-color displays, and it tends to mess with my screenshots). 

The one change I would like to see is the implementation of a sidebar rather than top tabs like the ERGO theme has, but similar to onjegolder's modification:

I think this is something that may be pursued in the bigger/longer-term admin theme project, but not in this interim project. 

I am testing new theme in Firefox 24. I have issue with top dropdown menu. When i hover tob bar menu item, dropdown menu is shown without problem, but i cant focus any dropdown items with mouse (always dissapears).

Thanks I was able to reproduce as well. Looks like I need to wrap the mouseleave() in a 250ms setTimeout() for Firefox, at least that seems to fix it here. I'll commit this update tomorrow. 

[adrian 9,754]

BTW - I love where you are headed with color schemes and Pete's suggestion to be able to easily change color combos within a given theme. I think it's really nice to be able to match the admin panel to the color scheme of a client's site without needing to create a new theme. It makes the client feel like the backend has been built especially for them.

[apeisa 3,659]

I love the new themes and all the nice improvements (like font-awesome, "add new" etc) Ryan, fantastic work!

I noticed that drag & drop file uploads aren't working: probably changes in dom are effecting the js init there?

[Pete 3,456]

Might be something worth considering time-permitting? 

...

Time is not permitting

I meant to say "when time permits" and not sound like I think you actually have any spare time

[Nicolas 70]

Great work on the new themes Ryan.

For a longer term or bigger admin you maybe interested in Open Karma, a project started by @saltinejustine and @bastilian.

[iNoize 32]

Also the ManagerManager dont show the Infolink icons. Dont know where the bug is. In the Module or in the Theme. Im new to PW and try and learn a lot of things currently.

[ryan 14,799]

BTW - I love where you are headed with color schemes and Pete's suggestion to be able to easily change color combos within a given theme. I think it's really nice to be able to match the admin panel to the color scheme of a client's site without needing to create a new theme. It makes the client feel like the backend has been built especially for them.

This is possible now, but requires just a little bit of development (and only a little bit, thanks to SASS). 

1. Copy one of the /site/templates-admin/styles/_colors-*.scss files to a _colors-something.scss file (replace "something" with whatever you want to call your color scheme).

2. Now edit your /site/config.php and add this line:

$config->adminThemeColors = 'something'; // replace "something"

3. Edit the file and adjust the SASS variables in your _colors-something.scss file to suit your color scheme (but read the rest below before doing so).

4. Edit the main.scss file and change the first @import line to reference your new colors file.

5. I recommend keeping a watch on your main.scss file so that it recompiles it to a single main.css file anytime you make a change to any of the files. That way you can just view the changes in your browser as you make them to the _colors-something.scss file. From the terminal, you'd do this, and then let it run while you work in another window: 

cd site/templates-admin/styles/
sass --watch main.scss:main.css

From there you should be able to tweak your color scheme and see the changes immediately as you make them, every time you reload your browser. 

I had never used SASS before this project, and am not taking advantage of all that you can do with it. But I found it super easy to get started with (literally 5 minutes, just read the homepage) and a lot simpler to use and work with than regular CSS. This is probably old news to most of you that have been using these pre-processors for years, but I've never been an early-adopter, so tend to wait for things to become standard (and then some) before I start using them. And it seems like SASS (and LESS) have become quite standard. 

[janlonden 16]

Wow! Thank you Ryan. A big improvement from the old theme.

I get this message when I press the "Add new" button: "Not yet configured: See template family settings."

What am I supposed to do in the "Family" tab?

One more thing, I would like the base font size to be larger. Right now I have to squint to see some texts. Maybe it's just me but I like large font sizes. Is there a way to easily increase the base font size?
 

[adrian 9,754]

Hey Ryan,

Just a small usability issue with the thumbnail version of the gallery. When trying to reorder images you can't move to the left or right, you have to move up and down of the image beside it.

Also, love the new items in the debug mode tools - hooks etc! and the way it now starts collapsed by default. I would like to see an option to collapse everything again after expansion though.

Any thoughts for a different skin for TinyMCE? Cirkuit would look good I think.

Thanks again!

[Pete 3,456]

Wonder if this is of use for less tech savvy users: http://leafo.net/scssphp/

Theoretically something that could be bundled into a module

[ryan 14,799]

What am I supposed to do in the "Family" tab?

Edit any template, click to the "family" tab, and choose at least one template for "allowed templates for parents". A new option will appear that says "Show in the add-page shortcut menu?". It also includes description text that states the following:

Conditions required for this to work

1. You must select a parent template (see: "allowed templates for parents" above). If more than 1 is selected, only the first will be used.
2. The selected parent template must have defined this template as one allowed for children.
3. There may only be one instance of a page using the parent template in your system.  
4. The admin theme must support this feature.

If you are used to using family settings to limit what pages can go where, then you'll find that the above conditions match up with what you'd usually do. Meaning, PW will auto-discover what templates can be shown in the shortcut menu. If it's showing something you don't want it to, then you can turn it off by selecting "No" in the shortcut menu question for any of those templates. 

One more thing, I would like the base font size to be larger. Right now I have to squint to see some texts. Maybe it's just me but I like large font sizes. Is there a way to easily increase the base font size?

Does anyone else agree? Currently the base font size is 13px (same as PW has always been). I could always bump it to 14px. Though it is quite a size difference, (too big to my eyes, and I'm on a 30" 2560x1600 screen where everything is already small). It is defined in one place, and all other font sizes (except #footer) are affected by this rule in main-[colors].css (or main.scss). 

#masthead, #notices, #content, .ui-dialog {

  font-size: 1.3em;

}

Beyond that, the best way is to just increase the font size in our browser. I tend to do this a lot on sites that I visit to increase the font-size. In OS X, it's CMD= to increase and CMD- to decrease (I'm assuming it would be ALT= and ALT- on Windows to do the same). 

Just a small usability issue with the thumbnail version of the gallery. When trying to reorder images you can't move to the left or right, you have to move up and down of the image beside it.

Hit reload a couple times, sounds like you may have an older cached version of InputfieldFile.js stuck in your browser cache. 

Any thoughts for a different skin for TinyMCE? Cirkuit would look good I think.

Thanks for the suggestion, I'll give it a try. Though I'm pretty much using CKEditor exclusively now, but TinyMCE is still the default, so we've got to make sure it looks good. 

Wonder if this is of use for less tech savvy users: http://leafo.net/scssphp/

That looks interesting, though I'm not sure you even need PHP for this. I didn't give SASS a try for a long time in part because I assumed there would be technical requirements, multiple things to install, configuration, new stuff to learn with no time to do it, new terminology (Compass? still not sure on that one), etc. I was surprised that it didn't take anymore than what is on that 3 line box at the top of the SASS homepage. Apparently OS X already comes with a running copy of Ruby, so I didn't have to do anything other than type "sudo gem install sass" and then it all worked. So for those running in OS X at least, it is surprisingly easy to get going. Learning the basics of SASS was just as easy, as it's all right there on the SASS homepage. Maybe ProcessWire should have such a helpful homepage like this.  

[geniestreiche 24]

there are also some applications for the fancy sass, scss, compass, less or coffescript stuff...

http://incident57.com/codekit/

http://mhs.github.io/scout-app/

http://koala-app.com

[Manfred62 277]

Thanks for the suggestion, I'll give it a try. Though I'm pretty much using CKEditor exclusively now, but TinyMCE is still the default, so we've got to make sure it looks good. 

just an idea: make CKEditor to the new default RTE?

[janlonden 16]

Edit any template, click to the "family" tab, and choose at least one template for "allowed templates for parents". A new option will appear that says "Show in the add-page shortcut menu?". It also includes description text that states the following:

Conditions required for this to work

1. You must select a parent template (see: "allowed templates for parents" above). If more than 1 is selected, only the first will be used.
3. The selected parent template must have defined this template as one allowed for children.
5. There may only be one instance of a page using the parent template in your system.  
7. The admin theme must support this feature.

If you are used to using family settings to limit what pages can go where, then you'll find that the above conditions match up with what you'd usually do. Meaning, PW will auto-discover what templates can be shown in the shortcut menu. If it's showing something you don't want it to, then you can turn it off by selecting "No" in the shortcut menu question for any of those templates. 

Got it. Thanks!

#masthead, #notices, #content, .ui-dialog {

  font-size: 1.3em;

}

Ahhh. Much better with 1.6em Even though some margins and paddings are proportionally too small.

[adamspruijt 180]

just an idea: make CKEditor to the new default RTE?

This, or upgrade to the new TinyMCE v4?

Theme is a nice improvement, though some things like the insanely small PageListActions still worry me (I've had clients complain about the size of these in my themes and I've never gone below 12px). How open to some input/diversion are you, seems like building a new theme should have had a community discussion before hand. Maybe the work could even have been off loaded to a "GUI task-force" of sorts? I feel like the end result could benefit from more open brainstorming and discussion. Not to say I don't like this theme, but with all the great themes already in existence it's apparent there are a lot of great ideas floating around out there... anyway don't mind me I'm insanely picky.

[WillyC 721]

How open to some input/diversion are you, seems like building a new theme should have had a community discussion before hand. Maybe the work could even have been off loaded to a "GUI task-force" of sorts? I feel like the end result could benefit from more open brainstorming and discussion. Not to say I don't like this theme, but with all the great themes already in existence it's apparent there are a lot of great ideas floating around out there... anyway don't mind me I'm insanely picky.
 

this is.comunitey discushion no ?

 

there anothor page 

u.missed page.1::

This is all kind of preliminary and open to changes. I'm trying to keep the scope of the project fairly small since I don't have much time to work on it. But just wanted something to quiet the haters a bit for a little while, so that we can take our time on the bigger admin theme project for longer term. We'd appreciate your feedback if anyone has time to help test. 

 

Not trying to solve all issues or add every new feature we'd like, but just trying to come up with something to have as an interim replacement for the default admin theme until we can afford the time to do something broader in scope (like Phillip Reiner's great admin theme design for example). So this theme doesn't necessarily break a lot of new ground, but hopefully has some of the improvements that people are looking for.

      ...

i make willyC colors schemos.too

ok.to poopst in here ?

[Soma 6,414]

Hmm I'm adding in site config.php

$config->adminThemeColors = "classic";

and it's still on the warm. I'm lost why it's not working.

[janlonden 16]

Hmm I'm adding in site config.php

$config->adminThemeColors = "classic";

and it's still on the warm. I'm lost why it's not working.

I had the same problem. I just thought I had missed something

I fixed it by renaming main-classic.css to main.css and replacing that one with the original.