bernhard

That sounds too good to be true. I'm not sure I understand how that is supposed to work, for example: Does that mean that the sticky navbar, which is great, will somehow also be moved to the base theme to make the rock and reno themes benefit from that addition as well? Does that mean that the CMD+K hotkey will be moved to the base theme as well? If that is the case, I apologise. Because then it means that I misinterpreted the current setup. My interpretation from what I saw in the code and folder structure was that there is a lot of stuff going on in the new theme that seemed to me like it was designed to be part of the new theme only. Sorry @ryan, but this does not work! If you have a <button class='uk-button uk-button-primary'> anywhere in the backend the hover effect that you showed will not be applied to that button. If that's expected and "uk-button-primary" is not supposed to be used, then it would be great if you could add docs about how to add basic UI elements like a primary button to the PW backend in a correct and reliable way. Thx. Sorry @diogo but what might look like a simple line of css to you is actually much more. First, I can't just fallback to #000 when supporting other themes (like reno or rock), it needs to be a LESS variable. So it would probably be something like var(--text-color, @global-color). This also shows why I think it would be great for module authors to have css variables and uikit variables at least follow the same naming conventions, if we have to support both from now on. Second, this line of css is one line that was not necessary before. This might mean for many modules that they need to provide a CSS file now. Still sounds like I'm making a mountain out of a molehill? I'm not. Having to provide no css file compared to 1 css file means that we need to deal with a lot. We might need to add an additional build step. Maybe even an automated CI workflow. Or we need to add a dependency (like RockDevTools) that watches our LESS assets and compiles them to CSS that every module user can use without any hassle. These are all a lot of costs. I'm just wondering whether they have been considered. @diogo you are taking my example out of context! I was trying to explain the problems that evolve from the PW backend using different classes for different things (ui-button vs. uk-button-primary etc). And your out-of-context reply shows me that there seems to be a blind spot about the fundamental problems that we are facing now. UIkit has hundreds of classes. My point is that trying to override them instead of actually using them is a very bad idea! So please try <h1 class='uk-text-primary'>Hello World</h1> This is what I mean by the cake does not taste. Having to file github issues for all UIkit classes that are not yet "properly" overridden by the new default theme is... Not elegant. It's not what ProcessWire has been for me for such a long time. It's not fun. --- PS: Don't want to restart the discussion about details here. I just tried to respond to answers that are related to and underline what I wrote above. For me it's not about details. For me it's about the bigger picture.

What we are doing here is basically reinventing the wheel. We are trying to invent a new design system that makes it easy for developers to be used and to be customised. But we already have this design system. It is called UIkit. It is in the core. It is built on logical and semantical components (base, text, buttons, background, utilities, ...) and it has thoughtfully defined and well documented (!) variables and concepts. Yes, it uses LESS (or SASS), which is not the coolest technology on earth. But this decision has been taken by @ryan in 2017. If the decision was that CSS variables are superior and we proceed with them: More than happy! I'm using CSS variables all over in my projects (on the frontend). But keeping UIkit/LESS as the foundation and then adding a new theme with 3200+ lines of overrides just does not fit with the genius and beautiful image that I have had of ProcessWire. To me it looks like somebody was decorating a cake here. Adding layer over layer to make the cake look good. For me it just doesn't taste 😞 It never really did (ui-button vs. uk-button-primary, etc), but it was ok. It was the reality that I grew up with. Now it's different. Now things got a lot worse and I think this was not necessary. I guess I was hoping that all the effort that was put into a new admin style would bring some fundamental improvements of the overall situation. @ryan, you have pushed so many great updates over all those years and you have solved so many problems in a way that just left me behind with deep respect and amazement. Now we have yet another layer of complexity to deal with when working on backend modules. I'm not happy this time 😞 I appreciate all the effort that you put into making PW attract new users and I understand that it must be frustrating to get such a harsh feedback by some of us. Especially after putting so much work into it. The thing is: It did not have to be like this. Why not ask the community upfront? Before all the work has gone into it? To have an unbiased view? To keep the risk and emotions low (for everybody)? To hear what others might think of such a fundamental change? To get feedback and maybe even good ideas? Or to explain what is considered to be fundamental and what is considered to be experimental? The question is: What now? The decision was obviously taken long time ago, so I guess we have to deal with it (even though I think it would be the best to take it back completely). If you ask me - as a long term member and contributor - what I'd like to see to make things less painful for now and make things better long term, here are my suggestions: make the css variables used in the new theme be aligned with UIkits less variables (--main-color vs. @global-primary-background ...) remove dark mode completely, or, at least, disable it by default and add a warning that it is experimental - I think it will cause 99% of work for very little benefit add docs for the new theme and the concepts it uses rewrite the whole admin theme/framework from ground up with a modern stack (css variables + Alpine JS + darkmode) as soon as possible Thank you and all the best for the future of ProcessWire

Thx for adding some of my requests. +1! These toggles can be a no-go. And I think the current solution is a no-go as well. Imagine you are a module developer and you want (or need) to use checkboxes in one place. What do you do? Instruct all your clients/users of your module to set their backend to not use toggles? Easy solution? Not really... What if they had some modules installed that rely on the toggle-styled toggles? For example because they built an interface like this: This interface would break when using checkboxes! Because checkboxes don't have this left-right pointing indicator. I think there needs to be a better solution. And I think, again, that the new toggles look nice, but at what cost? I think we module authors have to have the option to control whether something is a checkbox or it is a toggle. This can't be the decision of the style that is being used. Maybe you can make the toggle-styles only apply to container-divs that have the class "toggle-style" or something? That would be a progressive enhancement. All checkboxes would remain checkboxes and if you @ryan decide that toggles look nicer on the page editor's settings tab, go for it and add the class "toggle-style" there. If I develop a module where I think toggles look nicer, I can add the class "toggle-style" too. But if nobody decided to add that class, we should get good old checkboxes. And a working user interface.

Ok... the list goes on Light is OK... Dark is basically a nightmare: That also means that any of my RockGrid customers (or RockCommerce, which also uses it) will not be able to use those modules with dark mode 😮 @ryan I'm "a bit" concerned... I agree that the new style looks nice. But at what cost? 😞 I'm not sure whether they have been properly considered this time, sorry. To be honest I think the decision to offer a dark mode in that way was a mistake. Or does anybody have some good ideas or answers? Am I missing any obvious solutions?

Another checkbox issue, here on my calendar module: Also the space on top of the tabs inside the modal is far too big. But I think that has been reported already. And on darkmode we see another example of how problematic using default uikit markup got with this update. I'm using "uk-background-muted" for the "enter time" and "enter range" elements. These visual helpers get lost on dark mode:

Hey @ryan I'm preparing to add some new features to RockCalendar (looking at you @FireWire 😉 ), so I thought it's a good opportunity to see how it works with the new theme! As you can see, the light mode looks a lot better and the dark mode totally loses the day headlines (Sun, Mon, ...) Could you please share some information how we as module developers can make our modules work with the new style? It might sound easy for you or the style authors or any CSS ninja out there, but it might not be easy for backend-focused devs. In this specific case I'm wondering: How can I make the headlines show up properly in dark mode? Which color would I set? Which css variable would I use? How can I make buttons like "today" and "left / right" at the top right look like all other buttons (like publish, for example)? Regarding the buttons I'm quite confused for a long time and it might be the right time to mention it now: Many buttons use "ui-button" as class. As far as I understand this was the class coming from jQueryUI and with the old style this was giving it some rounded corners (compared to default uikit buttons). Then UIkit was added to the mix and from that time on I thought we can use "uk-button uk-button-primary" to style our buttons. At least to get matching colours. That meant that anybody using admin.less to customise their backend and changing the primary color saw a button in the primary color. Now we have another layer on top. A style using CSS variables, overriding UIkit, which overrides jQueryUI. This might be wrong - I don't yet understand how all of them play together and which layer overrides another, but I think you get my point and I'm happy to be corrected or get an explanation of how these layers are supposed to work together. May I also ask for some help or explanation how we can deal with that to provide good and reliable modules? What classes shall we use for which elements of the UI? This also brings me back to this question I raised earlier regarding all the UIkit UI components: Most likely it's something that PW doesn't use, so it isn't styled, but I'm sure it can be. I think we do use uk-alert boxes, but always of a type like "primary" or "warning" or "danger", etc. So maybe we just need to add a style for alerts that aren't of a specific type. To be honest I'm very confused about your statement, so it would be great to get some more details here. I understand that jQueryUI has been used for several aspects of the admin (like the drag&drop etc). And I understand why UIkit was added to the mix in 2017. What I do not understand is how UIkit is supposed to be used by us developers now. Using ProcessWire as the CMS of choice does not only mean to use the backend and all its features as is, it also means (for me and I guess many others) to build something on top of it. This does often not only involve the frontend (where we have full freedom), but also the backend. It might involve adding some details here and there via hooks, it might involve building custom inputfields or it might involve building custom process modules (aka custom admin pages). I always thought that having UIkit as a common ground is something that I/we can rely on. At least as long as the UIkit theme would be supported. That meant to me, that I can build anything for my clients (both direct clients or clients using my modules) that is based on any of the UIkit components listed on their docs (eg https://getuikit.com/docs/accordion). Now your statement makes me wonder whether that is still the case. It sounds a bit like that some components are simply not supposed to be used, which would be unfortunate and less than ideal, in my opinion. I'm a bit confused and afraid how I would ideally build a module (or upgrade any of my existing ones, which are a lot...) to make them work well with the new style, the old default style and maybe also the rock style, if anybody prefers it over the others. As you stated several times anybody is free to choose whatever admin style he/she wants. But that means in return for me as a module developer that I have to support all these options. When using UIkit, there are some proven standards that the company Yootheme defined. We have "uk-button-primary" for primary buttons. We have "uk-text-lead" for slightly bigger leading text. We have "uk-text-muted" for subtile grey text for explanations and such. We have tooltips to add additional information on hover, etc. All this is documented well on their docs. So it is obvious for anybody how to use it. It is not obvious to me any more in how to use anything related to UIkit when I have to expect that at least one of my clients/users might possibly be using the new style and might possibly be using dark mode 😞 For example I just added this hook to ready.php: wire()->addHookBefore('Inputfield::render', function ($event) { $inputfield = $event->object; if ($inputfield->name != 'title') return; $inputfield->description = '<div class="uk-text-lead">This is a test</div>'; $inputfield->entityEncodeText = false; }); Which renders fine in light mode: But does break on dark mode 😞 I wonder what the idea is to solve such issues? Are we supposed to NOT add any standard-UIkit markup to any of our backends that is not part of the PW core admin theme and that is not supported by the new style? Or are we supposed to add custom css overrides for such cases to our modules? Or are we supposed to report such issues whenever we find them and then wait for you or the authors of the new style to add support for it? Or do you think the the new style could be improved to support default UIkit markup without breaking? What would be the correct way to add a slightly more prominent intro text to my title field that works properly across all new and old (uikit based) styles? Thx in advance - it got a bit long, sorry! But this change basically effects years of my work...

Hey @marie.mdna sorry for the delay. I was sick and had to have some days off the computer 🙂 Thx! And thx for your question! The answer to these kind of questions is probably always the same: Yes and no. Yes, you can for sure build such a scenario. No, not out of the box. It's similar as if you asked "does ProcessWire support selling digital goods?" RockCommerce tries to be a good foundation for selling anything online and using ProcessWire to manage all the data. So it will handle the basics for you that are the same for any store that I can think of (meaning handling orders, for example), but everything else usually has to be built by the developer. With product variations being one exception as not every store might need it, but if it does, it would be an absolute nightmare to have to build it on your own. So to answer your question: Just have a look at my website - I'm doing exactly that! You can buy my modules there. Once you buy one, the store sends you an email with the license key. The mail is sent by WireMail, the logic for the license key is built on my own. The invoice is created using RockPdf. The thing is: Every shop is different. Every business is different. How long is a license valid? What does it allow? Etc, etc. I tried to provide a good foundation that saves you a lot of time and makes a lot possible with the least possible effort. Just like ProcessWire does with the $page magic and the admin interface to manage content. Does that make sense? The great thing about RockCommerce is that when using it, you have all your data in ProcessWire. You control that data, you define its structure. And you can easily add your own business logic on top of it - exactly like you want. So many things are just some lines of ProcessWire API away 🙂 But that also means that you might have to build that logic on your own, that other shops might already have built in. In the way they think is best, of course 😉 Which might fit your needs or not... I have added this to the docs: https://www.baumrock.com/en/processwire/modules/rockcommerce/docs/checkout/

So happy to hear that, thank you 😍 Would be great to see what you built!!

Great you got it working and yeah, if you need to compare multiple values, then having all available in the $page object in saveReady sounds like a good solution! Some notes here: I think this is the same as just using pages()->getFresh($page) ? I think the variable name $cachedPage is not ideal, because it's actually the non-cached page. It's the page fresh from the DB, not the cached copy that lives in memory I don't know this syntax: $actualPlace = $page->get('location_place', 'text', ''); And in hooks I tend to avoid nested IFs, so you might consider refactoring your hook to this (though yours is absolutely fine, of course): <?php // Ensure first three chars of the required field 'location_place' can't be changed. $wire->addHookAfter('Pages::saveReady(template=location)', function (HookEvent $event) { // Ensure we have a valid page. $page = $event->arguments(0); if (!$page) return; if ($page->isTrash) return; // Load old page from DB $dbPage = wire()->pages->getFresh($page); // Get actual field values (required) entered by the user. $newPlace = (string)$page->get('location_place'); $oldPlace = (string)$dbPage->get('location_place'); // if new and old value match --> nothing to do if (substr($newPlace, 0, 3) === substr($oldPlace, 0, 3)) return; // otherwise reset location_place to previous value and show an error on the inputfield. $page->location_place = $oldPlace; $inputfield = $page->getInputfield('location_place'); $inputfield->error('First three characters can not be changed. Input reset to previous value.'); // If you prefer less drama, just show a message instead of the error state on the input field itself. // $event->message('First three characters can not be changed. Input reset to previous value.'); }); But when checking for multiple values it might be better to use if(...) { ... } multiple times as early exits won't work in such a scenario 🙂

Maybe it's a caching issue. The navbar in the backend has unfortunately very aggressive caching built in, so you need to either log out and log back in or you use tracydebugger:

All good so far, no worries 🙂 Just wanted to say it early enough to not bloat this thread more then necessary. Thx and good luck!

You can use the "fields-" key instead of "fields" and then it will even remove that field from your template without writing another migration. They are extremely cool 🙂 And can be used alongside or alone. However anyone wants.

I think the changed hook is not meant to revert any changes but only to listen to changes and trigger actions. But you can do this (not sure this is the best solution) - example using the title field in /site/ready.php: wire()->addHookAfter('Page::changed(title)', function (HookEvent $event) { $old = $event->arguments(1); $new = $event->arguments(2); $oldStart = substr($old, 0, 3); $newStart = substr($new, 0, 3); if ($oldStart === $newStart) return; // save old value to a temporary property that will be used // in the saveReady hook to revert to the old value $page = $event->object; $page->revertTitle = $old; }); wire()->addHookAfter('Pages::saveReady', function (HookEvent $event) { $page = $event->arguments(0); if ($page->revertTitle) $page->title = $page->revertTitle; });

Hey @Pavel Radvan there is a mistake in my code. It should be != not == --> The purpose of this line is to only execute the rest of the callback for the template that you want. That means if the template is NOT your template, then it should exit. My code was not meant to be copy/paste ready. It's a boilerplate code to show you how it works. You have to make it work yourself or ask for help in the forum. But please not in this thread as we are getting out of scope here and we are not talking about RockForms any more. Please create another thread.

Hey Pavel. I think it's the same with all form modules - that's not their primary goal. You'd have to update the page via API. But in your case it might be easier to modify the regular PW page edit form via hook: <?php $wire->addHookAfter('ProcessPageEdit::buildForm', function($event) { $form = $event->return; // the page being edited $page = $event->process->getPage(); if($page->template == 'your_template') return; // remove a field $form->remove('my_field_name'); // sometimes removing fields leads to problems, so you can do this: if($f = $form->get('my_field_name')) { $f->collapsed = InputfieldForm::statusHidden; } // make a field requried / not required if($f = $form->get('your_other_field')) { $f->required = true; // or false } }); That might be an easier approach?

Hey Pavel. Sure. Why not? Any specific questions? Whether RockForms or FormBuilder is better depends on preferences I guess. There's also FrontendForms as another option. Not sure what you mean by "FormBuilder is quite big for this specific form".

@ryan maybe it would be good to make existing installs use the old style and new installs use the new one by default?

Same problem with the EditFieldLinks tweak https://github.com/baumrock/RockAdminTweaks/tree/main/tweaks/PageEdit/EditFieldLinks Do you think these issues can be fixed in the admin style or do we have to fix those issues in the affected modules?

@theoretic just to confirm.. you have set AdminThemeUikit to use the "original" style?

A quick backup strategy could be to setup https://processwire.com/modules/cronjob-database-backup/ to backup the database every hour (if it's not a huge site). Then at least the maximum risk should go down to the work of 1 hour. There have been several similar reports these days, but as @wbmnfktr mentioned I think they have been related to RepeaterMatrix only?! Not sure what the status of that is @adrian ? Luckily I have not encountered anything like that so far. It does not sound like that would be the case, but just to be sure... Do you have very, very much fields on that page? Then you might be hitting your server's max_input_vars limit.

I haven't seen this happen for over 10 years as it's a very friendly and helpful community and it's also part of our community guidelines: https://processwire.com/talk/topic/8234-community-rules-guidelines/ 😉 If you see anybody violating the rules just contact one of the moderators - no need to blame anybody upfront. Thx

@bernhard Thanks for all the feedback! How do I duplicate those notifications? I don't recognize what I'm seeing in your screenshot. I tried ProcessWire.alert() and ProcessWire.confirm() but both are styling correctly. Hi @ryan these are just regular UIkit notifications from the Notification component: https://getuikit.com/docs/notification - Just copy this into the console of your devtools: UIkit.notification({ message: 'my-message!', status: 'primary', pos: 'top-right', timeout: 5000 }); UIkit.notification({message: 'Danger message…', status: 'danger'}); Either of the custom CSS options should enable this. Ryan, this could be the answer to all of my/our questions. The theme was marketed as being easily customisable by changing just a few css variables and I think you did a good job, but as some of the comments show the new style might be missing some. Of course anybody can look into the 3100+ lines CSS file and find the right spot to tweak. But there might be several spots that one has to override. It might be necessary to add !important to make it work. And one might forget about edge cases like RepeaterMatrix, RockPageBuilder, whatsoever. I think some main design decisions should be taken care of the style, not every developer reinventing the wheel over and over again and fixing the same issues over and over again. For the buttons it seems to be quite easy. We'd just need a CSS variable for this: .ui-button, .uk-button, .ui-button.ui-state-default, .ui-button.ui-state-hover, .pw .tox-dialog .tox-button, .pw .vex-dialog-button, .pw .vex.vex-theme-default .vex-dialog-button { border-radius: 9px; } Line 2649 of admin.css I think this is also likely a good use case for the custom CSS options. I disagree for the reasons mentioned above and I ask you 3 guys to rethink that to offer something like this: --border-radius: 10px; --input-border-radius: var(--border-radius); --button-border-radius: var(--border-radius); This means if someone wants all input/button elements have the same border radius, let's say 20px, then all he/she has to do is this: --border-radius: 20px; And if he/she wanted something like the style currently uses it would be something like this: --input-border-radius: 0; --button-border-radius: 99999px; Just tried, but it works for me. Are you missing the leading "/" before "site/", i.e. "/site/" ? Thx! Sorry, my bad! I forgot I had a very restrictive .htaccess in place that blocked access to that css file 🙂 I tried both site and /site and both did not work. But now both versions do! I don't usually like having to do extra file_exists() checks, but maybe it makes sense here. Perhaps the admin custom CSS file could be pre-populated with a /site/templates/styles/admin.css or something like that so that it would be the standard it uses, unless you opt to change it to something else. Hmmm. Good point. Not sure. I think it would make things easier to have a common standard, like having a default /site/templates/styles/admin.css for example with just a few comments pointing to the example files at https://github.com/processwire/processwire/tree/dev/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples --- Another problem I just realised: My login screen is always the new style. This toggle seems to have no effect? It's not .htaccess this time... Why choose a color that isn't readable? For anything that has customizable colors, there's a responsibility to choose an appropriate color. In this case, unless you disable dark mode, you'll want to choose a color that works for both. The three predefined color options are there as good examples. Maybe we'll add separate main color choices for light and dark mode, I'm not sure, but it will still be the responsibility of the person configuring the color to choose something that is legible. Because it's the primary color of the CI. That's the whole point for having the primary color customisable, no? The backend should match the main color of the company and that's often a color that is dark to have a good contrast to white. It's not a solution to simply choose another color to make it work on dark mode 😞 Sure. We're already doing it for the PW logo, so makes sense we should for custom SVG logos as well. Great, thx! Most likely it's something that PW doesn't use, so it isn't styled, but I'm sure it can be. I think we do use uk-alert boxes, but always of a type like "primary" or "warning" or "danger", etc. So maybe we just need to add a style for alerts that aren't of a specific type. Thx. This is the code that it uses: <div class="uk-alert"> ATTENTION - RockMigrations is installed on this system. You can apply changes in the GUI as usual but if any settings are set via code in a migration file they will be overwritten on the next migration cycle! </div>

As we have a new core admin style now I guess there is no need to keep AdminStyleRock alive any more, so I'm going to archive it sooner or later. Any different opinions? https://processwire.com/talk/topic/31242-new-blog-admin-theme-redesign/ As the new theme introduces a lot of issues I might keep AdminStyleRock alive. We'll see how things evolve!

Hey @ryan @diogo @jploch thx for your work on this! I have some questions: 1) UIkit notifications seem to not use the theme's styling: 1.b) Is there a reason why primary buttons are black and not in the primary color? 2) Could you please add an option to make the button's border radius customisable? 3) Could you please add an option to make all input's border radius customisable? Ideally both would use the same setting by default but could be also set differently. This was one of the changes proposed by @Chris-PW when we were working on a new admin style and I think it makes sense to have everything that can take user input (<input> <textarea> <button> etc) have some rounded borders. We already have lots of lots of lines in the admin to help with grouping content, wrapping inputfields etc. and all those lines add up. Having all clickable elements look slightly different from everything else (but identical on their own) helps a lot in my opinion. 4) Is there a reason why <select>s have white background and regular inputs have a light grey? 5) Is there an option to disable the new toggles and get back to good old checkboxes? See https://axesslab.com/toggles-suck/ Even if one prefered toggles over checkboxes in general, I think there are some situations where they are absolutely counterproductive, for example here: 6) I tried do add the file site/templates/admin.css with the following content: :root { --border-color: var(--main-background); /* --inputs-background: var(--blocks-background); */ } I then put both "site/templates/admin.css" and "/site/templates/admin.css" in the AdminThemeUikit config for "Custom CSS File", but it had no effect. Strangely when I put "wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/borderless.css" it worked! I also tried with this content: div { border: 1px solid red; } Still no luck. 7) Would it be possible to have the admin theme load one CSS file by default. Similar to what we know from /site/ready.php it is often so much nicer to just place a file in a predefined location than to have to update a module's config somewhere. This might not sound like a lot to do, but when working with migrations and automated deployment workflows these things get more tedious, because you can't simply change the module config, you have to migrate these changes and then commit them. Also a predefined location reduces the risk of typos, of missing leading slashes, etc. 8 ) Where to report bugs/issues/requests? In the PW issues repo? Here in this thread? Somewhere else? 9) When editing a page in a modal (just add &modal=1 to any page edit form) there is a lot of unused space at the top: 10) On the page tree I think it is ok to have the action items text-only in this case (though I'd probably prefer the old style here): But on the trash we have some text followed by the action buttons and there this text-only style is really not good imho: 11) +1 for this: I'm using #0a2b99 for the primary color and links are near to not readable in dark mode: 12) @ryan As you can see in the screenshot above when using dark mode I'd probably want to change the logo to a white version. If that image were an <svg> this would be quite easy to do with CSS, but at the moment it is using <img src='...'> Could you probably update the theme to make it inject SVG markup for the logo directly? 13) Regular UIkit <div class='uk-alert'> are not styled properly (they use the default uikit blueish), which is even worse in dark mode: Thx!

What do you mean?