Jump to content

RockSkinUikit - Easily and quickly skin your AdminThemeUikit backend


bernhard
 Share

Recommended Posts

---DEPRECATED---

Please use 

 

RockSkinUikit

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

less

demo-theme

 

Download:

 

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.

  • Like 20
  • Thanks 1
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 🙂

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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:

image.thumb.png.f4aee8c4d604d95b2a88c3d4ad37de8b.png

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...
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?

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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!

 

 

 

 

 

 

 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...