RockSkinUikit - Easily and quickly skin your AdminThemeUikit backend

[bernhard]

---DEPRECATED---

Please use 

 

RockSkinUikit

Just install the module and you can change the look&feel of your admin instantly by changing only one color:

 

Download:

• https://modules.processwire.com/modules/rock-skin-uikit/
• https://github.com/BernhardBaumrock/RockSkinUikit

 

I'd be very happy if any of the CSS pro's could do some final improvements to the default.less theme - though I'm already very happy with the result!

Happy Admin-Theming ? 

PS: At the moment this downloads a fork of the original AdminThemeUikit module because one method is not yet hookable. You can support this request here: https://github.com/ryancramerdesign/AdminThemeUikit/pull/77 and then I can update my module to pull the original theme from ryan.

[cstevensjr]

A great contribution!

[matjazp]

@bernhard thx for this. I'm playing with it, looks fine. But when I select to use default uikit theme in /wire/modules, not in /site/modules, I get this in Chrome:

Refused to apply style from 'http://localhost/site/assets/RockSkinUikit/theme.less' because its MIME type ('text/ html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Because of that the look of the admin was, well...I had to uninstall RockSkinUikit to get admin theme back.

[bernhard]

Yes, because the default theme has no hookable getCSS method and so it tries to load LESS and not CSS parsed by RockLESS. That's why my module sets the module in the site folder as default.

[AndZyk]

Hello @bernhard,

I like the idea of this module, but if I understand correctly, it is currently only possible to use this module with a copy of the AdminThemeUIkit inside the sites-folder?

This is currently a deal-breaker for me, because I don't want to miss out on AdminThemeUIkit updates. Hopefully the theme will be hookable, so that the AdminThemeUIkit inside the wire-folder can be used.

So long I will wait with your module. But thank you for your efforts. ?

Regards, Andreas

[bernhard]

On 1/30/2019 at 11:58 AM, AndZyk said:

I like the idea of this module, but if I understand correctly, it is currently only possible to use this module with a copy of the AdminThemeUIkit inside the sites-folder?

Yes, that's correct.

[MarkE]

Just trying to install this. I set AdminThemeUikit to be the site module, but I still get an error message on installing:

Unable to install module (RockSkinUikit): Duplicate module pathname must be one of: /site-ncog/modules/AdminThemeUikit/AdminThemeUikit.module 
/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module

[bernhard]

I guess this has nothing to do with my module. Where and how did you install AdminThemeUikit?

[MarkE]

Not sure I understand. 

/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module is part of the core

/site-ncog/modules/AdminThemeUikit/AdminThemeUikit.module was put there by your module

 

[bernhard]

Is your site a multi-instance installation? Why is it site-ncog and not just site?

PS: Please try it with a fresh PW single installation and report if that works. If not, report the error. If yes, please try to debug what could be the problem with the other installation.

[MarkE]

1 minute ago, bernhard said:

Is your site a multi-instance installation?

Yes. I'll take a look as suggested.

[MarkE]

On 2/4/2019 at 9:37 AM, bernhard said:

Is your site a multi-instance installation?

wire>core>ModulesDuplicates.php (line 200-201) is looking for a pathname of  /site/modules/AdminThemeUikit/AdminThemeUikit.module, which will only be the case in a single-site installation - the installed modules are in /site-ncog/modules/AdminThemeUikit/AdminThemeUikit.module and 
/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module.

[bernhard]

3 minutes ago, MarkE said:

wire>core>ModulesDuplicates.php (line 200-201) is looking for a pathname of  /site/modules/AdminThemeUikit/AdminThemeUikit.module, which will only be the case in a single-site installation - the installed modules are in /site-ncog/modules/AdminThemeUikit/AdminThemeUikit.module and 
/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module.

Thanks for clarifying. That's why I don't like multi-site installations. There are always edge-cases where it doesn't work as expected... But this one might be worth an issue on github.

[MarkE]

10 hours ago, bernhard said:

But this one might be worth an issue on github.

It is just hard-coded into your module on line 62:

  $this->modules->duplicates()->setUseDuplicate("AdminThemeUikit", "/site/modules/AdminThemeUikit/AdminThemeUikit.module");

I tried picking up the path root from $config instead:

  $this->modules->duplicates()->setUseDuplicate("AdminThemeUikit", $this->config()->urls->siteModules . "AdminThemeUikit/AdminThemeUikit.module");

but that didn't load the css so I also changed lines 71 & 72 to 

    $config['cssURL'] = $this->config()->urls->site . "assets/RockSkinUikit/theme.less";
    $config['logoURL'] = $this->config()->urls->site . "assets/RockSkinUikit/processwire.svg";

Interestingly, these files had been installed to /site-ncog/modules/RockSkinUikit/assets, so I had to move them manually. (Leaving them where they were gave a server error.) 

Now it's working nicely ?

[bernhard]

5 minutes ago, MarkE said:

Interestingly, these files had been installed to /site-ncog/modules/RockSkinUikit/assets, so I had to move them manually. (Leaving them where they were gave a server error.) 

Thanks for your help and for clarification. You said

Quote

wire>core>ModulesDuplicates.php (line 200-201) is looking for a pathname of  /site/modules/AdminThemeUikit/AdminThemeUikit.module

so I thought it has nothing to do with my module. Could you please provide a working PR for those changes?

[dotnetic]

Hey @bernhard. The module does not work if the admin url is not the standard "processwire" url. Somehow in one of my installations, it just returns wrong paths. Which comes from the line

$file = $this->config->paths->root . trim($event->return, '/');

because $event->return has the custom admin url included. There seems to be some confusion with paths and urls?!

 In my case the $file in line 35 of RockSkinUikit.module it looks like this:

There is one "bewerbertool-talents" directory too much. It does not exist.

I can change it if I use 

$file = $this->config->paths->root . "site/assets/RockSkinUikit/theme.less";

But even after that, I doesn't work, because RockLess.module's getUrl function also returns a false url.

I also think, that the module should remove the folder site/assets/RockSkinUikit on uninstall and restore the use of the default AdminThemeUikit.

No more time to debug right now, but I hope I could help you to make the module more versatile.

[dotnetic]

Another thing. In another almost vanilla PW installation your module runs fine.

But if I change which AdminThemeUikit module should be used in the settings, and set it back to "/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module", your module still loads and destroys all styles because the css can not be loaded.

The default AdminThemeUikit works again if I uninstall RockSkinUikit

[bernhard]

Thanks for testing my module ? 

23 minutes ago, jmartsch said:

But if I change which AdminThemeUikit module should be used in the settings, and set it back to "/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module", your module still loads and destroys all styles because the css can not be loaded.

The default AdminThemeUikit works again if I uninstall RockSkinUikit

That's because the default Uikit theme's getUikitCss method is not hookable. I'm waiting for ryan to accept my PR... https://github.com/ryancramerdesign/AdminThemeUikit/pull/77

36 minutes ago, jmartsch said:

Somehow in one of my installations, it just returns wrong paths. Which comes from the line

$file = $this->config->paths->root . trim($event->return, '/');

because $event->return has the custom admin url included. There seems to be some confusion with paths and urls?!

Would be nice if you could investigate more time to debug on this. I can't reproduce this, so I can't fix it.

[NorbertH]

What are the default colors used in Uikit ?

[bernhard]

16 hours ago, NorbertH said:

What are the default colors used in Uikit ?

Not sure I understand your question. Why don't you just look them up in the css files or browsers devtools?

[NorbertH]

I tried to use this tool

https://getuikit.com/v2/docs/customizer.html

To modify the look of my BE template. Just made some changes , downloaded the .less file and added its content to the 

theme.less 

file. 

This works good al long as i don't try to change some main colors.

As far as i understand it you have made a copy of the default admin uikit theme , and then added a few extra variables (eg. to combine the color of the menubar and the main buttons into one var @tm-primary-color)

Is it possible to just use a file whithout those modifications an completely rely on the UIKit Customizer ?

Thanks in Advance!

 

 

 

 

 

 

 

[bernhard]

On 7/5/2019 at 4:39 PM, NorbertH said:

As far as i understand it you have made a copy of the default admin uikit theme , and then added a few extra variables (eg. to combine the color of the menubar and the main buttons into one var @tm-primary-color)

Correct ?

On 7/5/2019 at 4:39 PM, NorbertH said:

Is it possible to just use a file whithout those modifications an completely rely on the UIKit Customizer ?

Technically yes, but I guess you'd have to do a lot of customizations. Just give it a try and please report back your findings!

[NorbertH]

Where did you get the original file , cannot find it in the theme folder in the PW download?

Using the default file it should just look like the default UiKit theme, right ?

 

 

 

[bernhard]

What file are you talking about? This one? https://github.com/BernhardBaumrock/RockSkinUikit/blob/master/themes/default.less

It's the first 90 lines of AdminThemeUikit\uikit\custom\pw\pw-theme-reno.less with some custom modifications.

[NorbertH]

Yep was talking about that. What hapens when i emty it completely ?