Uikit admin theme discussion

[SamC]

11 minutes ago, bernhard said:

@SamC great. Maybe you want to use less.js (http://lesscss.org/#using-less-third-party-tools) to show a very simple way of playing around with the admin themes LESS files? We could even build a theme generator using less.js and/or AIOM's php based less parser... Changing colors of the theme should be a lot easier than downloading source files, compiling everything, uploading...

I had second thoughts about my disqus module because of privacy concerns. However, this sounds like a golden opportunity to make a different kind of module, one for changing the default theme colours. Could have a colour wheel, pick the colours for various elements, saving compiles it and spits out the new css to be included within admin (replacing uikit.pw.min.css). Something like that. Would be happy to work with you on this.

I like @theoretics idea of being able to choose precompiled css, but much prefer the ability to customise via a third party module.

[Peter Knight]

4 hours ago, bernhard said:

I think the main problem is that there is no guide at all of how to customize the uikit theme properly. Maybe you could share what we have to do in a tutorial?

I had the following info from Ryan when asking him about customizing the admin. I'm sure he wouldn't mind me sharing although the info is from end Sept so I don't know if it's all still applicable.

 

Quote

The files you would edit are in uikit/custom/pw/. If you add a new file in there, then you'd want to add it to the _import.less file. Other useful directories are uikit/src/less/components/ and uikit/src/less/theme/. In there, you don't edit anything, rather, you can see all the available variables and hooks that you can work with from your custom files. 

When it comes to compiling your stuff, you go into the uikit directory and type "npm run compile". It compiles to files in uikit/dist/ (like uikit.pw.min.css). That's what I do before pushing an update to GitHub. The problem with it though is that it's slow, and not practical for my workflow, which is to constantly adjust stuff and reload the browser to view it…

 

As a result, when I'm developing and making edits to .less files, I change the constant AdminThemeUikit::dev = true. This is at the top of the AdminThemeUikit.module file. That makes it use uikit/custom/pw.css instead of the dist file. I consider that pw.css to be the development "working file". My editor (phpstorm) is set to automatically compile that from the pw.less file every time I hit "save" on any .less file in there. It compiles quickly, like 1 second. I don't really know how I setup this part, because phpstorm just seems to do it automatically, never had to setup anything. But I guess the point is that you could setup any tool to compile that pw.less file, and when that "dev" constant is true, it'll make the admin theme use the corresponding pw.css file. That way you don't have to go through a slow "npm run compile" every time you want to make a change and see it. 

 

Also, I think it would help if you take a look at this file:

https://github.com/ryancramerdesign/AdminThemeUikit/blob/master/uikit/custom/pw/pw-theme-reno.less

 

That takes the stock Uikit 3 admin theme, and makes it look like the Reno theme. So now the AdminThemeUikit looks like Reno (by default). If I wanted it to go back to "stock", then I would remove that pw-theme-reno.less from the _import.less file that's in the same directory. If you are making a custom theme, I think you might find it handy to use a similar strategy, perhaps even starting from that file (or a new file duplicated from it), since it already has all the variables and everything you are likely to need. 

 

 

 

[SamC]

1 hour ago, Peter Knight said:

As a result, when I'm developing and making edits to .less files, I change the constant AdminThemeUikit::dev = true. This is at the top of the AdminThemeUikit.module file. That makes it use uikit/custom/pw.css instead of the dist file. I consider that pw.css to be the development "working file". My editor (phpstorm) is set to automatically compile that from the pw.less file every time I hit "save" on any .less file in there.

This bit didn't work for me as I don't use phpstorm. And there's some missing pieces to this puzzle. You can't compile without the necessary node modules (and you need nodejs and npm installed).

I did the following:

1) Git cloned AdminThemeUikIt into '/site/modules/'
2) 'npm install' (gets the modules) in '/site/modules/AdminThemeUikit/uikit/'
3) Created a new less file '/site/modules/AdminThemeUikit/uikit/custom/pw/gray-theme.less'
4) Commented out reno and imported mine instead in '/site/modules/AdminThemeUikit/uikit/custom/pw/_import.less':

// Theme
@import "gray-theme.less";
// @import "pw-theme-reno.less";

5) Then, 'npm run compile'.
6) Generates 'pw.uikit.min.css'.
7) Use AdminThemeUikit from /sites/ instead of /wire/. The option to choose which is in the config page for the module when you have the same module in sites and wire.

My custom less file is attached if anyone wants to try it out. It has modifications so the login form themes correctly, can set global margins (a few other users were not keen on the large padding) and other small tweaks.

gray-theme.less

[szabesz]

7 hours ago, SamC said:

because the icons then don’t point to the correct locations

This hard coded icon path issue of UIkit is a pita, it can be fixed by using symlinks (at least on *NIX systems) but that is a workaround and not a solution.

7 hours ago, bernhard said:

Changing colors of the theme should be a lot easier than downloading source files, compiling everything, uploading...

So true! I've already raised the same concerns. Changing the logo and the colors should be built in. The former is already supported, sure. But what about the colors?

[Jonathan Lahijani]

1 hour ago, szabesz said:

So true! I've already raised the same concerns. Changing the logo and the colors should be built in. The former is already supported, sure. But what about the colors?

Depending on how much you want to change, you can always do CSS overrides.  Put this line in /site/templates/admin.php, above the line that brings in controller.php:

$config->styles->append($config->urls->templates."admin.css");

Make a file in templates called "admin.css".

Now let's say you want to change the navbar color:

#pw-masthead {
  background: #666 !important;
}

 

[szabesz]

9 hours ago, Jonathan Lahijani said:

Depending on how much you want to change, you can always do CSS overrides. 

Sure  I've been doing it for a while. However, built in support would be most welcome.

[SamC]

I chucked up a tutorial here:

https://www.pwtuts.com/processwire-tutorials/making-a-custom-admin-theme-using-uikit-3-and-the-included-build-tools/

Hoping this method will become redundant though if I can get my head round building a module to change the colours etc. Something to work on in January (without distracting me from my JS which I should be doing...).

[bernhard]

thanks @SamC that brings some light into the dark of customizing the admin, at least for me

Quote

4) Create a new less file which will be used for your custom theme. For the sake of ease, here's my theme which should offer a starting point. You'll most likely only need to change a few variables at the top and re-compile (instructions to follow).

/site/modules/AdminThemeUikit/uikit/custom/pw/custom-theme.less

can you please elaborate how you created this theme's less file? did you just copy&paste&modify it from the original theme?

I haven't had a look into the theme's less yet, but regarding the template designer module i have some nice news: I'm just working on the PW Kickstart module and creating a processmodule which makes it very easy to modify the code of the recipes and run it. That's a perfect fit for modifying LESS files of your theme, compile them on save and instantly show the new theme. I'll try to put something together in the next few days with the help of your tutorial

[SamC]

29 minutes ago, bernhard said:

thanks @SamC that brings some light into the dark of customizing the admin, at least for me

can you please elaborate how you created this theme's less file? did you just copy&paste&modify it from the original theme?

I changed it to this now:

Quote

4) Create a new less file which will be used for your custom theme. For the sake of ease, here's my theme which should offer a starting point. I made this by copying the contents of 'pw-theme-reno.less' into this new file and modified it to add page background colour control, consistent login screen colours, ability to use smaller margins throughout, different logo effect, some text changes, more subtle warnings/errors and so on. This means you'll most likely only need to change a few variables at the top and re-compile (instructions to follow).

Sorted out the 'h2 {word-wrap: break-word;}' for those long paths too on the tutorial, broke the layout on mobile. You can see in the video when I demonstrate saving a page (missing required fields) at 1:06, I much prefer more subtle errors/warnings like this but that was a pain to change with the label colour being the same as the background of the error message.

I find the default one very old fashioned, is like this:

so I changed it to this:

29 minutes ago, bernhard said:

I haven't had a look into the theme's less yet, but regarding the template designer module i have some nice news: I'm just working on the PW Kickstart module and creating a processmodule which makes it very easy to modify the code of the recipes and run it. That's a perfect fit for modifying LESS files of your theme, compile them on save and instantly show the new theme. I'll try to put something together in the next few days with the help of your tutorial

Sounds tasty! Look forward to seeing this!