Jump to content
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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By sambadave
      Hi everyone, here's the problem I'm trying to solve.
      I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:
      ADMIN SETUP
      Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS
      I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.
      This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.
      THE PROBLEM
      I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.
      Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:
      Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.
      Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:
      Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.
      ANY SOLUTIONS?
      I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.
      Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?
      Thank you in advance for anyone who's read this far and has any words of wisdom!
      Dave
       
    • By SwimToWin
      The basic Processwire workflow assumes that I (as an Editor) want to save new Pages in draft mode - and therefore new pages are always set to unpublished by default. To publish the page, it is necessary to actively press "Publish", otherwise the Page will not be visible.
      The workflow is:
      Add new Page Status is now "Unpublished: Not visible on site." Press Publish - the page is now visible on site I want to publish pages right away (without having to press Publish).
      Where is that configured?
      ProcessWire 3.0.123
      Uikit v3 admin theme (0.3.0)
    • By franctic-aerobic
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By Peter Knight
      Hi guys
      I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.
      You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.
      https://www.amoss.ie/who-we-are/
      The main column in the above URL is successfully centered in most browsers except IE11.
      On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.
      Here's a simple CodeKit and JSFiddle of the issue
      https://codepen.io/edenstudios/pen/qvWpGo
      https://jsfiddle.net/EdenSt/auekfgqt/8/
      Thanks
      P
       
       
×
×
  • Create New...