Jump to content

AdminStyleRock - module and docs for AdminThemeUikit "rock" style


Recommended Posts

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:

68747470733a2f2f692e696d6775722e636f6d2f

  • Like 14
  • Thanks 2
Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites

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):

  • Like 2
Link to post
Share on other sites
  • bernhard changed the title to AdminStyleRock - module and docs for AdminThemeUikit "rock" style

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.

  • Like 1
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites
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?

Link to post
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
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...