fbg13

Uikit admin theme discussion

Recommended Posts

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.

  • Like 2

Share this post


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

 

 

 

Share this post


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

  • Like 1

Share this post


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

  • Like 1

Share this post


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

 

  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

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

  • Like 5
  • Thanks 2

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


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

default-error-page.JPG

so I changed it to this:

modified-error-page.JPG

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

  • Like 1

Share this post


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.

  • Similar Content

    • By ridgedale
      Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.
      Please could someone advise what the process is to organise the blog posts under the admin login to avoid very long, random lists of posts.
      My immediate thought is to have the posts listed in groups by year and month, but I cannot see how tit might be possible to do that.
    • By nickngqs
      How do I change the permissions for Who can access this page for a single page.

      This page inherits the admin template.

      I'm currently creating a new page called Settings using admin template and assigning it to a process of a module. I can see the Settings tab in superuser, but I can't see them in a role I defined called 'client'.

      So, how can i control what the client sees for admin template? Is there a page specific overwrites for permissions. I've tried allowing access in admin template view, edit. But still doesn't work
    • By Sipho
      What build tools do people use with processwire? Most build tools I have tried are either solely designed for single-page applications or don't support bundling npm packages.
      So far, I have been downloading third-party libraries and including them in my html. While this works, it isn't great when you want to update to a newer version. It also involves committing often hundreds of files not associated with the project when using git. For this reason, I would like to use a package manager to handle all of the updating for me and keeping my git directory nice and clean. After doing some research, it seems that npm is by far the most popular package manager. I find this strange considering it was designed for ndoe.js which is server side software but I can look past that.
      I have had some experience with webpack when I was learning how to use Vue.js for making single page applications. For that purpose, it worked pretty well but was also extremely confusing at first. Everywhere I go I see webpack being recommended as the number one build tool for front-end web applications. However, I have struggled to get it working with anything that isn't a single-page application. It seems to be designed to bundle everything into one or two js files. This doesn't really work in a setup like processwire. I would like to be able to import certain css and js into pages only as needed. For instance, if I only need a slideshow on one page, it doesn't make sense to include the code that does that on every page. That's not to say you won't have some global css and js. I additionally don't like how complicated it is to setup a webpack project and how webpack imports css inside js files.
      I decided to try Brunch which boasts being simpler than other build tools, including webpack. I must say, I am fairly impressed with it so far with it's ease of use. But I once again ran into the problem of it being designed for single-page applications. For example, I wanted to use lightbox on a few pages. After installing it from npm, I couldn't figure out a good way to include it's css. Brunch has a setting that let's you include styles from npm packages but it includes them globally. This means every single processwire page would have css for displaying lightboxes even when I don't need them. This would work but seems to go against the whole idea of being modular. I am also trying to use uikit as an npm package to no avail. I found somebody else with similar issues but was never answered: 
      I noticed that ryan opted to just include a static version of uikit in AdminThemeUikit. Is this the recommended way of doing things? Have I got it all wrong? Doesn't this introduce pains whenever uikit needs updating?
      All I want is a better way to handle all my dependencies. I have been looking for the correct way to do this and it's beginning to drive me insane 
    • By hollyvalero
      I like the Reno wrapper for the admin.  After looking at UIKit, then switching back to Reno, the back end is all Reno but the basic back end login page /processwire or /whateveryoucallit is displaying the original Default instead of the Reno login.  I realize this is a first world problem, but I can't seem to reinstate the Reno login.  Tried installing/uninstalling...  It's not the same page code and it's not the same style sheets... I can't uninstall the default ...what am I doing wrong?

    • By Kai
      Hi community, 
      Since googling "free processwire themes" does not bring up results, I release my former website template open source! In the hope that it will help many people to get started with Processwire - or just to simply test it.
      Download: https://github.com/q2apro/processwire-template
      PW-Featured here: http://processwire.com/about/sites/list/memelpower-we-create-business-websites/ 
       
      Free Processwire Template
      Free Processwire Template - built for a web development agency - now open sourced.
      Demo
      Online at web archive (some images missing but working): https://web.archive.org/web/20171028072758/https://www.memelpower.com/
      See also folder demos/screenshots.
      Installation
      Copy all files to your webserver. Create a database and import the file database/db_import.sql Edit the file wire/config.php and enter your database credentials. Go to yoursite.com/wire/ and login. Login: admin and Password: herewegocheckitout22 The template you find in site/templates
      IMPORTANT
      Copyright of Images by Kai Noack. If you use the template you MUST replace or remove all images of people and organisations. The logos used are also copyright protected.
      Donate
      If you like what you received, you can show your appreciation by a donation: https://www.paypal.me/q2apro
      Template License
      The source code of the template is free and open source. Do whatever you like with it.