AdminStyleRock - easily style your ProcessWire backend with two simple settings

[bernhard]

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:

[Ivan Gretsky]

Cool thing, @bernhard! It is clear you put a lot of effort and talent into this. Thanks for sharing with the community!

I think it would be great to have an example to understand, which modifications are possible and how to implement them. If you have something that could be shared, please do.

[wbmnfktr]

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

[bernhard]

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.

[matjazp]

Thank you (and Ryan) for your work on AdminThemeUikit. What I'm missing is an option to select between styles quickly. I was expecting something like this: I create a folder /site/modules/AdminThemUikit/styles/ and copy many different less files. The core AdminThemeUikit would then scan for this folder and allow me to choose between them in the module settings, similar to what we have in AdminThemeDefault, where we can select different Color Sets (classic, Warm, Modern, Futura).

[gornycreative]

15 minutes ago, matjazp said:

Thank you (and Ryan) for your work on AdminThemeUikit. What I'm missing is an option to select between styles quickly. I was expecting something like this: I create a folder /site/modules/AdminThemUikit/styles/ and copy many different less files. The core AdminThemeUikit would then scan for this folder and allow me to choose between them in the module settings, similar to what we have in AdminThemeDefault, where we can select different Color Sets (classic, Warm, Modern, Futura).

I was looking for this at first as well - wondered what I was missing until I read more carefully.

The question I have is a bit different. Say I want to incorporate a few style rule changes, etc. in the base admin templates. At one point we'd copy templates-admin over and make customizations there. Do we need to copy the structure to site/modules and make changes there if we want to alter the markup for the login screen, logo swaps, light/dark mode switches, etc?

[Chris Ernovsky]

First of all, many thanks to @bernhard for this fantastic contribution (and for all he's done for PW and the its community).

I must say I'm not a big fan of UIkit and prefer Bootstrap by far, especially now with 5.0 version which is so easy to customize thoroughly. I was even thinking about creating BS admin theme for myself (and clients) but - as my dev friend says - time, time, time... I get used to PW UIkit admin theme but it always annoys me with its esthetics and code. Now I've got a very convenient tool for changing few things so thanks a lot for that.

I do all by the book, it works fine, I can adjust the look. Not always as I want to but it's caused by my ignorance of UIkit and PW admin theme structure I suppose.

The question is: how far can I go this way? Is it only - as mentioned above - a quick method to change some colors OR can I dive in really deep here and change UIkit/theme A LOT to maybe even exchange the whole framework at some point (does it take effect on different parts of PW)? In other words: is it universal way (LESS compiler) or would it be simpler to create a new admin theme (module?) completely?

[bernhard]

Hi @Chris Ernovsky

glad you like it!

2 hours ago, Chris Ernovsky said:

The question is: how far can I go this way?

That is a good but not so easy question ? My primary goal was to make it easy to make the admin look and feel more like the brands of my clients. I don't have further ambitions.

That's why I introduced the wording "theme" vs. "style" --> a style is really just a modified CSS. Everything that modifies more of the admin might be called "theme". On the oder hand this module shows that you could combine both. Change the style on the one hand but also modify the theme via hooks on the other hand. You have lots of possibilities.

Going further you could create your own admin theme as well. I have no idea how hard that would be to build and maintain. I'm afraid of that, so I'll not do it ? 

[Chris Ernovsky]

@bernhard, thank you very much for replying!

1 hour ago, bernhard said:

I have no idea how hard that would be to build and maintain. I'm afraid of that, so I'll not do it ?

I'm at the same place right now... ?

It haunts me from time to time to build my own theme with admin structure reorganised a little bit. But I'm not there yet and there are (always...) more important things to do.

Anyways, you've made a simple yet powerfool tool to play with styling. I'm already using it and love it. So once again - thank you! ?

[gornycreative]

Is there a way to push admin.less rules to the end of the loading stack? I've run into a couple of situations building out a dark theme where I've had to use !important rules to override because it seems like the admin uikit css get loaded at the base and then additional admin module css get loaded on top of that.

This applies both to admin styled areas in both core modules and 3rd party modules. For example, there are rules in the image editor pop-up that appears when you hover over a thumbnail that are already flagged important and can't be stated with more precision to force an override.

[bernhard]

I think you should be able to define custom files via 

$config->AdminThemeUikit = [
  'style' => '',
  'recompile' => false,
  'compress' => true,
  'customCssFile' => '/site/assets/admin.css',
  'customLessFiles' => [ '/site/templates/admin.less' ],
];

see https://processwire.com/blog/posts/pw-3.0.179/

That means you should be able to do something like this:

$config->AdminThemeUikit = [
  'customLessFiles' => [ '/site/templates/admin.less', '/your/custom/style.less' ],
];

Does that work for you?

[gornycreative]

I'm not sure I'm being clear. I can get my rules to compile and apply, but because they are loaded earlier in the css stack, stylesheets from modules are getting loaded later and in many cases where I want to override in the admin.less the rule gets struck out because another rule defined later in the loading order overrides it.

So I can have rules like this in admin.less:

//Awesomeplete for autocomplete modules

.awesomplete > ul {
	background: hsla(0,0%,5%,.9);
	background: linear-gradient(to bottom right, @global-background, hsla(0,0%,5%,.8));
	border: 1px solid rgba(255,255,255,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
}

.awesomplete > ul:before {
  background: @global-background;
}

And the rules and color overrides appear in the CSS but they are struck out because the autocomplete module awesomplete has its own rules that get loaded later by the module.

To make the rules work the quick and dirty way I have to use:

//Awesomeplete for autocomplete modules

.awesomplete > ul {
	background: hsla(0,0%,5%,.9) !important;
	background: linear-gradient(to bottom right, @global-background, hsla(0,0%,5%,.8)) !important;
	border: 1px solid rgba(255,255,255,.3) !important;
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
}

.awesomplete > ul:before {
  background: @global-background !important;
}

Here's the loading order:

So for example, because aos.min.css is loaded after Admin.css and AdminTheme.css, any rules I put in place to correct the default colors set in place by the module loading its own css are superseded unless I use !important or more properly use a rule with greater specificity than the original rule in aos.min.css - I'm guessing the css order is in place to allow module builders to have more control over the display for their module components.

 

[bernhard]

Ok I understand now... But there's nothing we can do here. The admin theme/style is the base for backend styling and modules usually inject their scripts lateron. If you have problems with AOS style rules you'll likely be better off trying to request changes there.

[gornycreative]

Yes that's what I figured. Looking at it more closely, I think if I bring in the HTML.AdminThemeUikit class in rulesets for those modules I can guarantee more specific rules.

[bernhard]

Once my PRs are approved the latest version of this module will make it possible to set the main color via an inputfield:

 

[Alpine418]

I've a regular updated PW installation (3.0.191) which is more than a year old. I cannot find any AdminStyleRock module. Why? And how can I install it the best way?

 

[bernhard]

On 5/28/2021 at 10:41 PM, bernhard said:

Download & Docs: https://github.com/baumrock/AdminStyleRock

You need to download it first...

[Alpine418]

10 hours ago, bernhard said:

You need to download it first...

I did. But when I want to change the main color nothing changed.

[bernhard]

Just released version 1.0.0 which makes it possible to set both the main color plus the logo url from within the module (without going to AdminThemeUikit settings):

AdminStyleRock

Easily style your ProcessWire backend with two simple settings:

Or via RockMigrations:

$rm->installModule("AdminStyleRock", [
  'rockprimary' => '#0069B4',
  'logo' => '/site/templates/img/kollar.svg',
]);

[bernhard]

v1.0.1 removes the pw logo from the mobile offcanvas nav.

before:

after:

[Ivan Gretsky]

Good day  @bernhard!

My question is not directly related to the module, but rather to admin theme UIkit customization in general. This place seems to be the right one for that too.

Is there a way to assign different admin uikit styles and less customizations to different user roles?

[bernhard]

2 hours ago, Ivan Gretsky said:

Is there a way to assign different admin uikit styles and less customizations to different user roles?

Yes, that's possible. Create an autoload module and in the init method set the config options so that it uses different css files for different roles: https://github.com/baumrock/AdminStyleRock/blob/main/AdminStyleRock.module.php#L32-L47

$role = "get users role id";
$style = "/path/to/your/style-$role.less";
$compiled = "/path/to/your/style-$role.css";

PS: Just realized that you might not be able to access the user role in init() so maybe you need to use ready() instead. Hopefully that's not too late in the process but I think it should work.

[bernhard]

On 5/29/2021 at 9:50 PM, wbmnfktr said:

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.

Just read this by coincidence. Could you please remove this statement as this is not longer true. We can now hook almost any part of the admin theme and the module does so: https://github.com/baumrock/AdminStyleRock/blob/f0687ed6220adbf13d8c2c818b59c3de4f57b102/AdminStyleRock.module.php#L69-L78

[bernhard]

The module got several updates over the last few weeks. Now it integrates perfectly with RockFrontend and ALFRED frontend editing and you'll get the same look+feel both for the backend and frontend editing:

Backend:

Frontend:

[bernhard]

The latest version adds some improvements to alfred styling. Now the ALFRED styles take the primary color setting of this module as primary color ?