Leaderboard

@Robin S Uikit 3 originally had LESS only, and we were an early adopter. I would have preferred SCSS at the time, as I didn't know much about LESS. But I soon learned that there's not that much difference between the two. If you know the basics of one, you already know the other. Now I regularly use both LESS and SCSS and consider them equals for my use cases at least, one of which is maintaining the Uikit PW admin theme. Given two choices I would almost always choose what's less popular. ? (I don't use WordPress either). It might be worthwhile for a major CSS framework to also add SCSS support like Uikit has done, but I think in our case it wouldn't be a good use of time. @ukyo There is some stuff we can delete, such as the /src/scss files and /src/js files, which we don't need. But prior to Bernhard's work, I was using Uikit with node and that's not something I'd want to go back to, it was really not a good solution for PW and was the main obstacle towards more happening with AdminThemeUikit. I'm sure it works fine for some, but for me and I imagine many PW users, we don't like having dependencies beyond PHP and PW, especially higher maintenance ones like node and the seemingly endless dependencies on top of it that result. Bernhard solved those obstacles so that now customization of Uikit is easily accessible to all PW users, and while it might consume a little more disk space for the .less files, it's well worth it in my mind. If someone wants to define their own uikit source path, that is also fine too, but the goal here has really been to make the whole thing as simple as possible, so I don't want to require people to download their own separate copy of Uikit, but will definitely get rid of some of the unnecessary files we don't need.

Read about the $config->sessionAllow option here: https://processwire.com/blog/posts/multi-instance-pw3/#more-session-control

AdminStyleRock Easily style your ProcessWire backend with two simple settings: Or via RockMigrations: $rm->installModule("AdminStyleRock", [ 'rockprimary' => '#0069B4', 'logo' => '/site/templates/img/kollar.svg', ]); ----------- Background: As of PW 3.0.179 we have a new style in AdminThemeUikit called "rock" style. This thread is here to report issues or ideas for improvement. The goal of the rock style is to make it as easy as possible to adapt your backend to the CI of your client. That's why it uses only ONE single main color and keeps all other design elements in a neutral grey. Download & Docs: https://github.com/baumrock/AdminStyleRock Here is an example screenshot using default uikit colors and a custom base font:

I'm not really sure if a forum about technology full of strangers is the best place for you to open up in this way, but I trust and hope that in this community you won't be made fun of. I won't pretend to have understood most of what you expressed – I didn't – and although I respect the vulnerable place you find yourself in, I don't think I could be of much help myself, so the purpose of this reply is solely to try to break a silence that must be heavy on you, and initiate a positive and respectful spirit on the responses.

Exactly what Robin pointed to. Following is a slightly modified version in the site/config.php that also works in situations like accessing the site via CLI or bootstrap and is aware of admin page name changes. All session settings above the function can be modified to your needs for accessing your backend only.

The way I understand all this is as follows: You can create a new /site/templates/admin.less file and then based on either rock or reno you can start modifiying those @rock-* or @reno-* variables from those admin themes and override them from one single file. But not only that. You could also override almost each and every UIKIT base or component variable. Defining new gutter, font sizes, colors and all that's defined in UIKIT. It's more or less "limited" to the design as we can't add custom markup into the admin themes this way. Therefore we have to create our very own admin theme. The foundation is UIKIT, reno adds the know PW style, while rock adds just some different colors and slightly more modern tabs. As you can see in the Github repository... there are only two files for two themes with either a lot of customizations or just some tweaks. See here: https://github.com/processwire/processwire/tree/dev/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/styles Which can be compared here: I'm not sure what can be done this way at all but I guess and almost would bet that the community will soon show some nice examples. In the meantime I will play around a bit with this one. Right now I'm digging through a lot of files and the more I look the more confused I am... as I never built an admin theme nor really customized UIKIT in that way. Some things feel good, some things are just weird for now. Those links helped me to dig deeper (found them in the blog post): Rock style Reno style Uikit base Uikit components

I’m a nearly brand-new ProcessWire user, and I’ve got to say I’m really impressed — not just with this functionality, but with how easy @ryan and @bernhard have made everything. I installed the new version of PW on my cloud server, installed the Less module, updated config.php and put a few Less statements into admin.less — and had it all working perfectly within about 15 minutes. Nicely done!

Thx @wbmnfktr for the explanations and thx @Ivan Gretsky pushing me to (hopefully) make it even easier to understand everything and to build custom styles. I've created a new module for rock style development that also has docs that should explain everything.

Thank you, @wbmnfktr! This looks doable and helped me estimate the work involved. Thanks for the Textpattern import tips, too! I became intimately familiar with Textpattern's database scheme before writing my first TXP content importer for anther ProcessWire site migration, and I remembered to import from the body_html field then. ? But I did not know about the "Import External Images" plugin, and wound up writing my own image import scripts, which got a little hairy.

Not yet. Ryan asked me if we should use RockLess for the new admin theming feature but I voted against using RockLESS as it is more a proof of concept than a polished module. It lacks proper docs and some methods are redundant but slightly different. Ryans Less module is a simple wrapper around the same less parser that RockLESS uses but it lacks the file/directory monitoring part. I'd like to add that to ryans Less module one day for the same reason you are talking about, but I have no idea when that will happen. I thought it would be a good idea to start simple and solid with the new Less module and add features there when we need them. If you don't miss any features with Ryans module: Go with his module. If you miss features: Stay with RockLESS or even better make a PR so that we can shift to the new Less module ?

@szabesz No need new Module for Uikit source files ! Node example only for theme development, if you need admin theme customizations you can import uikit source files on your side. Node usage example is not for ProcessWire users, its only for theme development by @ryan or @bernhard. User can import uikit source files inside : /site/templates/admin.less You can add @uikit-source-path variable on wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw.less You can change variable value normally on lately loaded file on less. // Import uikit, use less variable for uikit source @uikit-source-path: "../../node_modules/uikit/src/less/uikit.less" @import $uikit-source-path; Change @uikit-source-path variable /site/templates/admin.less @uikit-source-path: 'source/to/uikit/less/uikit.less'; div { border: 1px solid red; }

Reno style: Rock style: Uikit offers SCSS but the PW backend is based on LESS - see the uikit-pw folder: https://github.com/processwire/processwire/tree/dev/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw This means that it is very easy to build an admin theme/style based on the core LESS files while it would need a total rewrite using SCSS I guess. I'm not an expert on frontend/CSS stuff. Maybe there are converters between LESS and SASS? I've tried https://less2scss.awk5.com/ and it seems to be working?! Or maybe https://jsonformatter.org/less-to-scss; But I've read some articles now and I'm not sure if a transition would be that easy... You just need the less module and you can use it for your frontend as well: https://processwire.com/modules/less/ $less = $modules->get('Less'); $less->setOption('compress', true); $less->addStr('@color: #4D926F; h2 { color: @color; }'); $less->addFile('/path/to/file1.less'); $less->addFile('/path/to/file2.less', '/url/to/images/'); $less->saveCss('/path/to/file.min.css'); A simple timestamp checker could look like this: <?php $src = $config->paths->templates."myfrontendstyle.less"; $dst = $src.".css"; if(filemtime($src) > filemtime($dst)) { $less = $modules->get('Less'); $less->setOption('compress', true); $less->addFile($src); $less->saveCss($dst); } $url = $config->urls->templates."myfrontendstyle.less.css"; echo '<link rel="stylesheet" href="'.$url.'">'; So the basics are really easy. This does not check if files exist and it does not check for changes in imported files. You can try RockLESS which has options to monitor files and/or directories for changes.

Very cool, thanks @bernhard and @ryan! Any thoughts about supporting an SCSS version of AdminThemeUikit and customising via an admin.scss file? Uikit offers a Sass (SCSS) version and my impression is that SCSS is more popular than LESS. Google Trends: One person's opinion from 2015: https://www.telerik.com/blogs/why-bootstrap-4-means-sass-has-won It would be interesting to conduct a poll of PW users to see which is the more popular CSS pre-processor.

Thx @ryan for all the additional effort you put into this and of course for providing me with all the necessary files and information to work on that PR. I'm really happy that everything worked out so well and I hope we see lots of great designs from some css ninjas in the community ? I've created a dedicated thread for discussion and issue reports related to the rock style that might be easier to find in the future: Happy styling ?

The email notifications for subscribed topics now seem to be truncated when they used to include the full post. @Pete, is it possible to change a setting so that emails are not truncated?