fbg13

Uikit admin theme discussion

Recommended Posts

Lets discuss the new admin theme, there has been very little talk about it, a few questions about its status and some simple designs by a few users.

Have you played with it? Do you like it? Do you dislike it? Of course I'm not talking about its design, but the way its structured, how it works and the features it offers so far.

------------------------------

I'm working on a purple color scheme for it and it turned out quite well (imo), but one thing I dislike is the use of iframes. I haven't used iframes before so it might be just me, but I'm struggling with them when it comes to javascript.

When iframes are used all scripts are loaded in every frame, which can lead to unexpected results.

Javascript is an easy way to add, remove, move etc. elements in the admin, but the iframes complicate things.

What are your thoughts? Is it just me?

Here's a screenshot of the purple theme:

pwd.dev-admin-page-.thumb.png.566b19470701bce4e054c9875e2edb18.png

  • Like 3

Share this post


Link to post
Share on other sites

Personally I like it. I'm using it more and more and hope to get time for a simple theme soon.

If you get a chance, can you document the steps you took to get you customising UIKitTheme?

I know your toolset is probably different than mine and it's about 4 years since I used CodeKit. Possibly thats a stand alone thread titled "Customising UIKit" etc or something?

For example,

  • I've installed UIKitTheme and activated it.
  • I have a local folder called site/assets/AdminThemeUikit
  • Within this I think it's the site/assets/AdminThemeUikit/uikit/custom directory I need to drag onto CodeKit to create a project

From this point I'm a little lost as to where things are.

For example if I want to change the color below to #eb1e62 then where do I locate that

  1. LESS file generating the CSS
  2. The colour variables 
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight: 400;
    color: #333;
    text-transform: none;
}

I think I just need a pointer in the right direction and I'll be flying!

 

Share this post


Link to post
Share on other sites

@Peter Knight You have to compile the less files. I'm using Koala to compile them. Only the pw.less (uikit/custom/pw.less) file needs to be compiled as it includes all other necessary files.

I add my styling in pw.less (below @import "pw/_import.less"), but you can do it in a separate file and include it in pw.less, or use the files in uikit/src/less/theme if you want to keep it organized.

That's my understanding of it, haven't used less/sass much before.

  • Like 1

Share this post


Link to post
Share on other sites

@Peter Knight

Personally I prefer CodeKit, but I would recommend you to use npm to compile the files of UIkit used inside the AdminThemeUIkit as described in the README. This is the recommended way to compile UIkit.

As @fbg13 mentioned I also added my stylings in the pw.less. It is really easy to override the variables of UIkit to make it look unique. ;)

  • Like 1

Share this post


Link to post
Share on other sites

what about using less.js for development? it would be as easy as adding one line:

$config->scripts->add('//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js');

 

Share this post


Link to post
Share on other sites

Whilst we're on the topic of processors, I've switched over to Stylus completely. The only time I use Sass and Less is when a framework requires it. I've becomed so accustomed to the way stylus works, that if you asked me to type out some Sass, Less, or CSS, you'd find missing colons everywhere.

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

The very same story here with Stylus. I use it only for about a month or two but wouldn't go back. I get angry when I have to deal with other preprocessors and the curly braces :)

  • Like 1

Share this post


Link to post
Share on other sites

The page tree in the sidebar can be a little inconvenient at times, when the sidebar is small and the action buttons span on multiple rows or on mobile devices.

I made them open in a drop-down on click. Here's a codepen.

action-btns.gif.358d779808ee6867845063e6e5661886.gif

  • Like 4

Share this post


Link to post
Share on other sites

I've just installed 3.0.83, but what happened to the sidebar option?

The options I have now are:

5a06dcfa3a127_ScreenShot2017-11-11at11_20_10.thumb.jpg.e12a5e14d00232fbf5242fa27c08b5ef.jpg

Masthead only has no sidebar and the other options have the entire page tree in a sidebar. So I go to 'Navigation':

5a06dd3cf2c4e_ScreenShot2017-11-11at11_21_10.thumb.jpg.b86b9223d02451ac2cc0b60e48b8b51e.jpg

And the options are to either click the logo to go back to default tree list page, or click logo for an offcanvas menu, which is just weird. Who would expect a menu when clicking on a logo?

I would have liked this sidebar menu positioned to the left and kept there, with the masthead doing a disappearing act. Or having a dumbed down masthead when there is a sidebar present.

Modern monitors have a lot of width, why used a masthead and cram everything in vertically?
5a06de272e0b6_ScreenShot2017-11-11at11_23_46.thumb.jpg.59dcf7607262fc0dcb42d7f73d9bbdb1.jpg

I feel this makes my editing experience worse than using the older reno theme. The design just feels so unbalanced. You can probably tell I'm not a fan of masthead navigation at all, but of course this is all personal opinion.

These are the best looking admins IMO so I need to look into how to create a custom admin theme in order to emulate something like these.

craft-admin.thumb.png.70b9f39b230dc796cd31fdbb39daa24e.png

ghost.thumb.jpg.dafc3f080eeeadd9f98f1ba8fc3c6d91.jpg

WordPress-custom-admin.thumb.jpg.33096f2977b9aee2ed801333c0151ec1.jpg

Of these three, craft is my favourite. I've used it to make a site before and it was extremely nice to use. It's obviously possible with the new uikit so need to find some info on making my own theme. I see in the readme:

"To install a new admin theme, you would place it in /site/templates-admin/ and leave the one that is in /wire/templates-admin/."

...so I guess that's my starting point. Looking at the current uikit admin module files though, I may be in a bit over my head here! Not sure whether you need to make a whole new module of just a '/site/templates-admin/' folder. Can't work out how the module AdminThemeUikit relates to the stuff in templates-admin folder.

  • Like 4

Share this post


Link to post
Share on other sites

This is what i said a while ago, but i could'nt find any time for it to realise until now:

I'd love this:
- remove masthead
- sidebar (left) always visible
- change icons to uikit3 icons
- breadcrumb on top (with search on the right which i forgot here)

- some design fixes

pwtheme.thumb.jpg.7f7cdf183b2864521029affc12420618.jpg

 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks @Samc and @maxf5, you gave me an idea about the future of my AdminOnSteroids module, rewriting it as an admin theme. This has been come up earlier too but there was no Uikit theme then, now it's perhaps more easy to do this.

  • Like 10

Share this post


Link to post
Share on other sites
2 hours ago, tpr said:

rewriting it as an admin theme.

Hmm, sound interesting...

Share this post


Link to post
Share on other sites

I went a bit off topic, but the question remains, what happened to the sidebar option? The video shows a sidebar with the usual pages, setup, templates etc. but the only option I have on the newest PW dev branch is an overlay (when clicking the logo?!) or a sidebar with the tree in it (equally weird),

@maxf5 I think it’s clear that we both want the same thing! :)

@tpr then drops a big teaser into the game.

Share this post


Link to post
Share on other sites

Hi there! And thanks for Processwire!

Just upgraded one of my PW sites to the new core-integrated UIKit admin theme and feel a bit confused. The "old" UIkit theme was in white and blue colors, rather minimalistic and very convenient for intense work. The current color scheme is less convenient: darker colors, rough contrasts. Okay, it's just my personal opinion -- but having possibility to choose different color schemes could be a good idea for this perfect admin theme. In plus, there's no need to build the "white-blue" theme from scratch -- it was already a part of UIkit admin theme recently.

Thanks in advance!

 

Share this post


Link to post
Share on other sites

I'm having trouble with 'npm run watch' on the included version of uikit with the admin theme. It's not generating the uikit.pw.min.css file as it should when saving the less files.

I'm replacing the uikit directory with the newest github version to see if that helps as per instructions here:

https://github.com/ryancramerdesign/AdminThemeUikit

As far as theming, it seems like all you have to do is modify:

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

...rebuild and you're good to go.

Also, removed the white background colour set in:

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

Not got as far as any screenshots yet but I've easily changed the colours so far, made a much lower contrast version with grays & teal. Come to think of it, I can't add any screenshots anyway because I've run out of upload space!

Share this post


Link to post
Share on other sites
21 minutes ago, SamC said:

I can't add any screenshots anyway because I've run out of upload space

If you have an own server you can upload images there and link to them. I sometimes do this, which also has the benefit that I can modify images easily if I need to, and they will remain there whatever happens to the forum.

Share this post


Link to post
Share on other sites

Hi @tpr thanks for the advice. I use dropbox a lot so I guess I could upload to there.

= EDIT =

I stuck an image in dropbox, shows the kind of theme I'm looking for. Certain things don't work, the login form is awkward as the fields and the labels have separate background colours, which is set to white. Not sure why, as the white is inherited from the page background colour. Anyway, the image from dropbox:

pw-teal-admin.jpg

The contrast between the teal and grey could be improved, but I find something like this much more relaxing than a dark masthead/white page combo. I don't mind the large page title, but I do mind the fonts, the buttons remind me of Verdana 10px from websites c2000. The tab fonts should be bold etc.

Changing font weights easily is not something I see here in the reno less file.

Not sure if it's a good idea to use google fonts here though (although a nice simple solution!).

Share this post


Link to post
Share on other sites

Took it one step further, and with a bit of hackery on the templates and the module file, got my sidebar in and various other tweaks. Not properly responsive, breaks some theme settings, the breadcrumbs are ropey, the sidebar is not full height (or fixed), less needs serious refactoring. Not sure why the masthead is a fixed height, but anyway, this is what I want my admin theme to look like :) 

w-sidebar.jpg

I personally think you don't need theme settings for layout, for me it just makes the admin theme harder to tweak. Why not just have a theme that does one thing?

I don't want to use jquery layout, or any fly in anythings, other than the sidebar on mobile. It doesn't need to be overcomplicated.

Would be awesome to get something like this working properly so it could be a proper admin theme. I'm a bit stuck on the php side of things, I can handle the less (need more practice with uikit though for sure). I'm more than willing to team up with someone if they like the idea/look of this.

  • Like 6

Share this post


Link to post
Share on other sites

Since no one tried to revive the "oldish" UIKit theme -- i did it.

  • Moderate contrast
  • Non-aggressive color scheme
  • Light colors, no dark backgrounds
  • Very close to the original UIKit design

Feel free to replace the /wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.min.css with the file i upload here. Hope it will be useful for community.uikit.pw.min.css

uikit.pw.min.css

screenshot.26-12-2017 16.46.55.png

  • Like 5

Share this post


Link to post
Share on other sites

hi @theoretic

this looks very nice. I'm just not sure about the blue link color... 

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

Share this post


Link to post
Share on other sites

@bernhard , thank You ! It's nice to see that i can do something useful for the community. I clearly understand that anyone can have his own preferred colors, but the convenience and positive UX can be achieved if we will accept some simple design rules.

  1. Consistency. Any color, any font variation should have the same meaning across the whole app. E.g. every link should be blue, every visited link should be grey and so on. The current AdminThemeUIKit has no major drawback of this kind.
  2. The link and button colors should mean what they mean in common. The blues and greens are the metaphor of something positive, greys are neutral, light greys are about something disabled and/or inaccessible. As for reds -- they're commonly threated as a sign of risk and a metaphor for dangerous actions. Here lies one of the important drawbacks of current AdminThemeUIKit . Every link is red -- why? The "positive" buttons like "Add new something" become red when hovered -- what is the reason? Okay, we humans are able to quickly adaptate to almost everything. But adaptation always means discomfort and perplexion.
  3. High contrasts and bright colors are for wow effect only. Admin interfaces need the light, moderate-contrast and calm appearance. The current color scheme of AdminThemeUIKit has the major drawback of high contrast and bright colors. Details are below.
  4. The bigger area we fill with color the less bright and less saturated this color should be. Just imagine the AdminThemeUIKit's header totally filled with red: it will be extremely annoying. The current almost-black header fill is also far from being ideal. Too dark, too saturated, too much contrast with the rest of the page. This big area needs a light, low-brightness, low-saturation filling. On the other hand, the textual links deserve the bright and highly saturated colors (but not reds please, at least for "positive" links).

Hope this will help. And thanks again for a perfect product!

  • Like 1

Share this post


Link to post
Share on other sites

@bernhard sorry, i though You mean the design approach not the technical realization. I just did some auto-replacements in /wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.min.css . The better way will be to do the same with /wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.css and then to minimize it using Your preferred tool.

Share this post


Link to post
Share on other sites

@bernhard I’m working on a tutorial for this i.e. compiling from source with node/npm and editing the less files. I’ll include my starter (less) file which allowed me to easily change the colour schemes as shown in my vid: https://www.youtube.com/watch?v=cKlzg_kIi-w

It’s pretty simple but the only problem I can see is that copying the module to ‘/site/modules/‘ means you have to keep the admin theme updated yourself. There appears to be no way to simply use a css file (in the module config) because the icons then don’t point to the correct locations and modifying the paths in the original less files for this module was a huge pita so I ditched that idea.

The way @theoretic did it above means the icons point to the correct locations but (a big but) this means modifying a core module.

 

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

@bernhard , @SamC , it's great what You're planning to do, but maybe it could be better just to provide some different compiled css files inside AdminThemeUIKit and to give users a possibility to switch between them?

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