New ProcessWire admin theme on dev branch

[Wanze]

Zahari,

There was certainly no offense intended, please don't take this personally. WillyC is.... WillyC, take a look at his other posts

I personally also think that the new admin theme needs some work, but it's still a work in progress I guess. Unfortunately I've not

enough time right now to test everything and help improving.

Btw I like your theme and the colors, please keep it up!!

Cheers 

[diogo]

No offense intended. I read all your post and and respect it a lot. I just don't have an answer for it.

How can one not laugh after any WillyC post?

[Martijn Geerts]

I do agree on lot's of things you mentioned, but there's a greatness in the admin (theme). The structural look of ProcessWire hasn't changed for years, this is a sign of good design decisions. 

Take the comparison between Apple vs Microsoft. Apple didn't changed the positions of fundamental elements in their OS, Microsoft on the other hand, arranged buttons, shift structures and given it visualy a whole new experience every single version.

The PW elegance theme, very well done, no real changes from the original PW theme and It feels even better (tnx, u-nikos). The only reason I don't use this theme, because it's not the default.

I think Ryan is a good front-end designer, but he's exceptionally good in scripting and keep all simple for us. 

Maybe the theming can be a community thing and the designs can be made with instruction from Ryan.  ( but then Ryan has to let it go a little ). 

[Manfred62]

Hi Guys

If these are the kind of responses that I get, then I'm the one who is obviously living in a world of my own....

Hi Zahari,

I like your ideas. Don't think anybody want to offend you.

[OT]

about WillyC: don't know any about his background. Maybe he like to be the forum prankster?

I'm also no native english speaker, but I try to do my best in putting my thoughts into correct english words. Also there are a lot of utilities which can help with translations. But some people (or only one person?) don't care about this. My way: if I don't get the meaning of this WillyC posts on the first read I ignore it.

[/OT]

[diogo]

if I don't get the meaning of this WillyC posts on the first read I ignore it.

You shouldn't, if you look in the forums for Willy's post, you will see how many important things he wrote already. And wouldn't be even half of the fun if it wouldn't be in Yoda language

[pwired]

All it takes is to read between the words.

[ryan]

This thread is for the new PW admin theme being developed for 2.4. Zahari and WillyC, I'm sure you guys both have good intentions, but this is not the right thread to promote other admin themes and such. We're now focused on wrapping up and fixing bugs in the new theme, not redesigning it. This is in preparation for the very soon upcoming 2.4 release. Zahari–please do keep up the good work on your theme, post to the directory, and start a thread for it, as I'm sure many of us will enjoy using it too. WillyC–please don't let that one go beyond the sketch stage.

I hope you can appreciate that there's no way one could ever get everyone to have the same viewpoint on subjective things, so that is kind of pointless. The goals here have always been more about the system. Then taking that system and reducing it to the most minimal, easy-to-use implementation. All while still incrementally improving on the old theme. The consensus has been that's what we've done, even if we're still working out some bugs. We'll let others take it and run with it in creating stuff more tailored towards their own preferences and other scenarios. 

The biggest complaints with the old admin theme were: 1) the colors don't have broad appeal; 2) the header area used entirely too much space; 3) the fields layout was too boxes-in-boxes with excessive linework, emphasizing the containers over the inputs; 4) the type was too small. The consensus and the math has been that the new admin theme solves these issues, while appealing to a broader audience than the old theme. Keep in mind there's no way to make everyone happy, so it's entirely expected to have a hater or two (I'd be more concerned if there weren't). Also keep in mind the old admin theme has a consensus of haters, among those that don't use it every day. So it's a bottleneck when it comes to new users. Is the new theme meant to be some kind of design masterpiece? Absolutely not–it is intentionally trying to avoid making design statements, and focused on reduction to essentials (though not to the point of looking like Craigslist). 

When it comes to the bigger design project (PW 3.0), we'll hand this off to Felix and Phillip (and perhaps others), who have already nailed the concept. That's my opinion, but we'll seek the input of the community to decide. My experience has been that small team design=good results, community/committee design=bad results. But that's another conversation. We'll move onto talking more about that once we've got 2.4 final. 

Regarding the Inputfield containers: yes there are still situations where the boxes-in-boxes (emphasizing the containers over the inputs) might suit an individual installation or preference better. But there are more where it doesn't. As a result, it's not as well suited as a default (and we've already been through this to excess), but it is something we always want to offer as an option.  The new admin theme system allows for configurable spacing between the Inputfield containers via a setting provided to the InputfieldWrapper. We may even make it configurable within the default admin theme at some point, but I'd rather see other themes focus on things like that. 

As for the typeface: Arimo vs. Arial. I agree with most with the points about Arial, and I think the arguments presented here against using any webfont make sense. As much as I like Arimo and as good as it looks on my own computer, I think we've got to revert to Arial–it makes more sense with this theme's goals and in the big picture. 

[thetuningspoon]

Zahari Majini, I like your design, although I'm not sure that it solves the "boxes in boxes" issue that was one of the main goals of Ryan's redesign.

I also don't agree with you on the contrasting colors looking fuzzy. I'm not seeing the borders with in-between colors you're referring to. I think the bigger problem with uncalibrated monitors is when using more subtle shades of gray and lower contrast areas, since many monitors will not be able to handle these nuances or will display the subtle grays as white.

I'm also confused about the "tables" you're referring to. Usually extra line height in tables makes them easier to read since it is harder to mix up the lines. And outlining every cell is often unnecessary and ugly as long as data is consistently aligned (and can sometimes actually confuse things by adding too much division or not emphasizing proper groupings). That said, your tables don't look bad since the outlines aren't overbearing.

Just some thoughts. From a visual standpoint I'm not "in love" with the admin redesign either, although from a functional standpoint I love it, and I do like the new field "grid" since it seems like a more flexible and clear way of laying things out. And I'm with Ryan in his philosophy of keeping the admin very simple and "unbranded". In that regard the flat design makes a lot of sense.

[Zahari M.]

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. 

 Hi Ryan

Thanks for your reply. My apologies if it had come across that I was in any way trying to impose my theme on you or Processwire or anyone here. That really was not my intention.  I only just installed the dev version a week ago.

If you read your closing line of your opening post for this thread, where I quoted you, i assumed that it meant that alternatives could be discussed and critique could be given. In fairness to me, I would argue that it would not be wrong to have read in and assumed an invitation of sorts was extended to come up with alternatives and explain why I do not like it. There is a slight ambiguity in what was asked...

On reflection after your reply above, you did say your trying to keep the project scope fairly small and I can readily accept your point of view and that you wanted to run with what you have. Thats cool Ryan!

All I wanted would have been for some people to actually try it out and see some of the things I was trying to achieve to collaborate on ideas to improve things. Another was to fix some issue that when you drill down into certain panels in the admin, there are some missing styes such that tables appear to be right up against the header in some panels. Some icons are not lining up and so I tried to line them up / position them better. Better positional coherence when traversing down into the system.

Sadly I found the response and actions of some here unnecesarily discouraging Ryan...

Contributing here is clearly not an activity best suited to me!

But I'm still thrilled as ever to be a ProcessWire user!

Merry Christmas to you and your family Ryan

God bless

[Zahari M.]

Hi everfreecreative

I actually don't have much to say on the boxes in boxes thing as it isn't something that actually troubles me! By adding 3 or 2px radius in the right spots and selecting appropriately colored borders, panels, headers and playing with wrapper widths in my own themes, I find little that disturbs me in this area, personally at least.

I have found that as the dev version moved from 3.6? to 3,8? some styling things had changed. And a little change can have a big effect. So depending on which version and which colors, you and I might have been looking a totally different things. Definitely on the last one, some important borders changed from a light transluscent blue to a light gray and it changed my perception considerably. And for the better. But whilst I did want to answer your question, I hope you understand that I want to leave all talk of issues of styling behind me now. I'll just do my own thing.

As to extra line height issue, my personal thoughts are something like this... if your dealing with a short single line of text like a one or two word title, it makes little difference whatever you set it to. But when it will be expected to wrap over 3 lines of text, then line height becomes extremely important. I personally like line heights in the region of 1.1 to 1.25 depending on the font and it's size. Currently it was set to 1.6. Often I will set a unique line height for each 10/11px, 13px, 14px 15 px and 16px sizes on my client themes as I believe that it makes for heightened readability. I also play with letter spacing and color shade a lot to find the ideal presentation for each of the various functional pieces of text. It's like a Formula 1 setup. Critical attention to every minute little detail collectively matters a great deal.

One of the few things I always do or now did with the old admin theme, which with one or two tweaks, I really liked the old admin theme BTW!, is change the line height of the description text as I found the default at 1.3 to be too much especially when you use it in the context of say a 30% widget.

I will leave you with these screen shots that reflect my somewhat different philosophy on line height. I think I can guess which one 99% this tough crowds sympathies will choose.... hee hee! I will say thous that I set this one up first pass. I have not optimised mine yet as I was working on so many things at once. But Im happy to say my table styles are around the  90% mark to being finished.  To me the standard 1.6 line height and the soft cells ( Heh heh any new wave teens here remember Soft Cell !!? ) are taking it towards almost a wall of text. Given the right i.e wrong display characteristics of the viewers device, these border might not even be seen!

Again I say, like I said before in all my other posts, these are just my opinions. It can also be considered to be way too crammed and too vertically concise. It's all perception yes?

 

As for WillyC, I give you full creative license to take my latest screenshot and make whatever edits you want and post them up here. For the rest of you, you obviously enjoyed laughing at them. And so in the true Christmas spirit, please have a great laugh at my latest screenshot for WillyC. Let's see what he can come up with !  I'll leave the closing remarks for Joss and let's all hope for something as positively sterling as the last one in true English fashion...

Consider it my sporting Chirstmas gift to you all.

So everfreecreative, thank you kindly for your taking the time to comment constructively. That's very kind of you. Merry Christmas to you!

Btw, some many years ago I got myself printed a box of business cards. I was very happy with the design and all my friends loved them. Out of chance I happened to show them to an old family friend and little did I know that he came from a real old school traditional printing background circa early 60's. He even set up a printing school here in Malaysia in the 80's. It had like 4 4 color Heidelberg printing presses and 30 other printing presses. He gave me such a shelling when he saw them and told me what an absolute utter piece of crap my card was. It was a pivotal moment for me and I took it positively  and took the the opportunity to learn, own my own, the subteties of typography and am ever so grateful to him that he did what he did. It's a life long journey but at least I have made some progree and continue to do so. My own personal journey is now focusing on trying to give discreet elements a little more vertical breathing space. I tend to make some things just a little too close together.

Manfred 62. Thank you for your comment and focus on the idea rather then the presentation. If you'd like I would be happy to give you the link to download it and examine it and see where you can take it and what you would adjust. It was designed as a rather neutral starting point. Just PM me. Merry Christmas to you too! Are you a German in Germany? Do you ever get to listen to any of the Bach or Telemann Cantatas live? If you do, do pm me and let me know what it's like. I managed to listen to a Handel one in Sydney which was a wonderful opportunity. But I'd love to experience a Bach one!

And thanks to the kind gentleman who sent me a very encouraging PM.

Im out of this thread now and wont be back into this particular one. So no more questions please.

But I will be back in some new ones next year to ask for help.

See you guys then.

Merry xmas and a happy new year to all!

God Bless

[diogo]

I quickly created a grey color scheme for the new theme for all the color haters out there

https://github.com/ocorreiododiogo/pw_grey_colors

[pwired]

Thank you from a lollypop/sugarpop color hater.

Your color scheme matches more office/administration/business style,

and that is what it has to be for something like processwire.

Also colors easy for the eyes is an important issue. Especially if you are going to look at them many times.

_colors-grey.scss and main-grey.css are both 90 kB. There is a whole lot of declarations and code in there.

That's gonna take a while to find out where to change something (safe) to customize the colors.

[Joss]

I know too well how difficult it is to hit everybody's wishes - you ought to try designing a site for a gaming community.

"The whites! They hurt my eyes!!!"

"I have a condition and your design will give me an epileptic fit"

"Why would you use a bright colour?"

And my favourite when we put a picture of a Troll (from a game) in the forum header:

"We think your use of a troll is highly insulting - are you trying to drive all the players away?"

I think that was more or less the point that I went into graphic detail about exactly where they could shove their 50 inch, 3d, multidimensional, ultra-HD, luminescent, thought-controlled monitors.

It is enough to make you yearn for the world of old fashioned, stiff-shirted corporations.

[Craig]

Potential bug: Has anyone else noticed a problem with the inline datepicker option on the Date inputfield? With the new admin theme, the month/year selection is filling the container's width when it shouldn't - the screenshot attached demonstrates it better than I can put into words.

The datepicker appears normally when configured on button click.

[kongondo]

...and 12 pages later here I am....   very, very late to the party....I am liking what I am seeing and loving where this is going. I'll have me one "warm", thank you very much Ryan and all other contributors...

[Joss]

Just playing happily with the new admin template (making a gentle colour version).

A couple of tiny thoughts:

On one of my own themes I have added a "Site" link on the top bar - very useful: it simply opens the front end in a new tab/window.

Also, the view link on a page is also useful if it opens in a new tab/window.

Other than that, it is looking good.

[Joss]

Here is an experiment!

I have just been playing with fonts, colours and using a bit of jquery to add a few icons and so on.

I have gone for open sans and made it a bit more corporate looking, without changing the layout.

icons are from the font-awesome, which is in Wire anyway. 

All I have done is hacked at the main-modern.css file and added to the main.js file. So you need to add 

$config->adminThemeColors = 'modern';

to the config file to see the colour and font changes.

There are no structural alterations, just cosmetic. It probably needs more work, but I have really done it just out of interest and a moment of boredom!

templates-admin-experiment.zip

[ryan]

The submit buttons that sometimes didn't register were driving me nuts. After trying to debug it for a long time, I gave up and just dumped the jQuery UI theme that we were using, downloaded a fresh copy of jQuery UI and put in it's default UI theme to replace. That seems to have fixed the issue. The only place you'll likely notice the jQuery UI theme change is in the datepicker, which isn't quite as pretty as the one that came with that other theme... but I'd had it with the submit button issue. I think we're better off just to stick with the latest version of a generic jQuery UI theme from the source, just to avoid bugs like the submit button one. It doesn't matter much to the admin theme, as very few things are actually styled by jQuery UI's stylesheet (datepicker, slider, etc.)

Joss–glad to see you experimenting! Regarding a "site" link, the theme has one as the home icon that leads the breadcrumb trail. I like it and think it makes sense, but have heard more than once that others aren't getting it, so I think we'll have to add a site link somewhere else. Regarding opening in a new window, this would be controversial because a lot in the development community think that a site/app should never open a new window and instead leave the choice to the user (click vs. cmd-click). I lean towards the side of leaving it to the user... not because I have a problem with target=_blank, but because it would drive me insane to have new windows opening all the time like that.

[Joss]

Yeah, the home link confuses the hell out of me. Really, that breadcrumb trail should start at the admin home page - so the Pages page. I know in reality the admin is a sub-page of the actual site, but it doesn't feel like that.

When it comes to opening a new window, in the end it is not the development community that is using the back end - it is the client. So I tend to err to how they would think this through. A site button is really a kind of global preview button, and you would not expect that to take you away from your form. I bet loads of people do not even know that ctrl click opens a new window (I just asked my lot here and none of them knew that and I had forgotten). 

The big CMSs seem to be split on this one. Wordpress opens in the same window, Joomla opens in a new one. Having used Joomla more than Wordpress, I have messed up several times when I wanted to check something on the front end only to find I had moved from my form.

On my old admin theme I just had a "Site" link on the top bar.

[Soma]

I'll say it once again... that's what my form save reminder is for so this doesn't happen when leaving the not saved form. I still think it should be core standard. Ryan seems against it because he is in fear of the wysiwyg that needs special treatment. I see that but would rather accept the challenge cause it is very well possible and all special inputfield just have to make sure they do a form change trigger if needed. There's not really any that currently doesn't work. I think a great software just has to do this otherwise it loses a big point in usability. But maybe thats just me.

[Craig]

I mainly use the Elegance admin theme, which includes a "Site" link. I missed this in the new admin theme too - so just add this code in the template:

<li><a href="<?php echo $config->urls->root ?>"><i class="icon-globe"></i></a></li>

Which produces the result attached (globe icon next to user profile one). Nice and simple

[Joss]

Soma, yes I agree with that philosophy.

Years ago I had a friend who was against anything that took a visual GUI approach to what he did with the command line. Lovely fellow, but he had the opinion that if you could not be bothered to remember the commands, remember what directory things were in or remember to do certain actions in a certain order, then what business had you with using a computer or the internet?

The real calculation is far more human - people want to do things, and just like watching TV or listening to music, they want it to be as effortless as possible and not to get tripped up their lack of knowledge or momentary forgetfulness (or regular forgetfulness for some of us!). Successful products (like Mac OS and Windows) do exactly that.

It probably explains why I struggle so much with my home server! 

[Manfred62]

@ryan: after changing to newest jQuery UI we have to style the 'add new' dropdown (see screenshot)

[ryan]

This admin theme has been converted over to be an AdminTheme module (a new module type just added to the PW core). If you grab the latest dev, you can now delete your /site/templates-admin/, as it will switch to using this admin theme as a module. The color theme is now selectable from the module settings screen.

It will automatically install when you upgrade to the latest dev and login to your admin. But if you want to revert back to another admin theme in /site/templates-admin/ (or even the old admin theme in /wire/templates-admin/), then all you need to do is uninstall the AdminThemeDefault module. 

There are several advantages to having admin themes be modules. I'll get into those later, but one is that you can have multiple admin themes installed. When you've got more than 1 installed, the User Profile screen will let each user select which admin theme they want. 

It's easy to convert any existing admin theme to a module:

1. Move all the admin theme files to /site/modules/AdminThemeSomething/ - replacing "Something" with whatever the name of the admin theme is. 

2. Create a file in that directory called AdminThemeSomething.module (again, replacing "Something") and place the following in it (substituting for your own info): 

<?php
class AdminThemeSomething extends AdminTheme implements Module {
  public static function getModuleInfo() {
    return array(
      'title' => 'Some Admin Theme',
      'version' => 1,
      'summary' => "Enjoy this nice admin theme",
      'autoload' => "template=admin"
      );
  }
}

3. Install the module from your admin, the same way you would install any other module. 

That's it!

If you have the dev admin theme (or another) installed in /site/templates-admin/ and no longer need it, feel free to remove that directory. But don't remove the one in /wire/templates-admin/. 

[kongondo]

Well happy new year to you too! This is nice, thanks Ryan. This is a massive positive change. I am assuming you'll start a new thread to announce the change? ...

Cheers

Edit:

...I'll get into those later.....

Silly me...of course you will...