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 4

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 Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Three unique color options Beautiful typografy using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, you can continue using all AdminThemeUikit features Option to activate theme for all users Color Variants:
      ProcessWire Blue

      Vibrant Blue

      Dark Black

      Requirements
      Requires AdminThemeUikit installed and activated.
      $config->defaultAdminTheme = 'AdminThemeUikit'; Installation
      Make sure the above requirements are met Go to “Modules > Add New“ Open “Add Module from URL“ and past the following url: https://github.com/noelboss/AdminThemeBoss/archive/master.zip Click “Download“ Click “Install“ on the “AdminThemeBoss“ Module

      Install manually
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module  
    • By joshuag
      Hey guys, 
      Thought I would share a quick preview of Designme. A module we (Eduardo @elabx and I) are building for visually laying out your templates/edit screens. 🙂
      This is a really quick, zero polish screen grab. FYI. 
       
       
    • By matsn0w
      Hey all,
      I am working on a website and I want to style the login page, but I'm a bit confused. 
      I want either the existing login page styled in my own way using some CSS (I guess I prefer that) or I want to create a custom page with a form to login. (Which I could style too).
      I used the code from Ryan and Renobird posted here - which works great - but that doesn't replace the original login page. 
      Is there a way to some sort of 'disable' the original login?
      I hope my question is clear and thanks in advance,
      matsn0w