Jump to content
bernhard

RockSkinUikit - Easily and quickly skin your AdminThemeUikit backend

Recommended Posts

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 19
  • Thanks 1

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
1 minute ago, bernhard said:

Is your site a multi-instance installation?

Yes. I'll take a look as suggested.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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 🙂

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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!

 

 

 

 

 

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 ?

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   1 member

×
×
  • Create New...