Jump to content

Recommended Posts

Admin Theme Canvas

A minimal admin theme with optimised page editor UI, based on Uikit 3.
Currently this is close to stable, but users are advised to be cautious and test thoroughly.
This theme is tested in all major Browsers including IE 11, Edge (>85), Chrome (>85), Firefox (>81), Safari (>11).

If you find any bugs or have ideas for improvements, feel free to post your feedback.

Download from Github
Download from Modules Page

Features

  • Minimal black and white admin theme
  • Fixed masthead navigation
  • Direct access to page tree navigation inside page dropdown
  • Less distraction for editors (when editing a page, the tabs are displayed as a dropdown menu inside the main navigation)
  • Options to customise the ui

Less distraction for editors

alt text

Direct access to page tree navigation inside dropdown

alt text

Page tree

alt text

Options to customise the ui

alt text

Login (inspired by AdminThemeBoss)

alt text

Requirements

Process Wire 3.0.100 or greater

Installation

  1. Go to “Modules > Site > Add New“
  2. Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“
  3. Click “Download And Install“
  4. On the overview, click “Download And Install“ again…
  5. On the following screen, click “Install Now“
  6. Go to your user profile page and change the theme to Admin Theme Canvas
  • Like 17
Link to comment
Share on other sites

@jploch - this really does look very nice - much cleaner and more professional. I really appreciate the hard work that's gone into it and I would love to use it, but unfortunately for me it always comes back to the fact that themes in PW tend to end up out of date when Ryan applies fixes and new features so I find it's just not worth the risk. Am I the only one that feels this way?

  • Like 6
Link to comment
Share on other sites

On 11/23/2020 at 8:07 PM, adrian said:

@jploch - this really does look very nice - much cleaner and more professional. I really appreciate the hard work that's gone into it and I would love to use it, but unfortunately for me it always comes back to the fact that themes in PW tend to end up out of date when Ryan applies fixes and new features so I find it's just not worth the risk. Am I the only one that feels this way?

My theme is still extending the default admin theme and updating uikit is not a big deal, however changes to admin theme uikit php files would need to be done manually. I cloned the admin theme uikit to have more control of the markup. I plan to support this if people are interested, Iam using it for all my new sites. 

A version that extends the uikit theme like admin theme boss does would then rely on Javascript and CSS to manipulate the dom right? Using a hook could be an option. Maybe someone better with hooks could colaborate 🙂

  • Like 2
Link to comment
Share on other sites

4 minutes ago, jploch said:

Using a hook could be an option

I don't honestly know if there are enough things hookable to make the changes you have implemented. tpr has changed a lot of functionality with the AOS module, so lots can be done, but I don't think it's necessarily easy. I expect it might be more JS than PHP to achieve what you want which seems a bit inefficient for this.

  • Like 1
Link to comment
Share on other sites

Thats a bummer. The changes to the orginal theme php files are minimal (2 files, and a few lines of code have actually changed), they enable me to change the main navigation into left and right with dopdown positions working (On the left the page related navigation and on the right the rest). The tree rendering in the page nav and all other changes are already done using jquery/js and css only (e.x. triggering the ajax button and moving the page tree inside the first level of the page navigation), Iam still using the same for each loops in php, the default theme is using.

With the dropdown problem solved (they need special classes to trigger javascript to set the positions) I think it would be possible to make this js/css only and just extend the original uikit theme like admin theme boss is doing it. But that would be a challenge

Edit: @adrian Does that mean you always stick with the default theme, because of potential compatibility issues? I'm just curious what the best practice is. I might go the route and make this js/css/less only and extent the original theme. But what would happen when Ryan applies changes to the original uikit theme php files, that could also break my theme. Having a copy of these files, at least makes sure my theme is not breaking when changes are applied to the original theme. These changes would have to be merged to my theme, but at least its still working. Also there is always the option to just change back to the original theme, when you are not happy with the features, with just a click on the admin profile page. So far I never had any compatibility issues with updating the core, thank to PWs well crafted architecture. But its a very valid point I want to make this as future proof as possible. My experience with PW is also that changes to the core admin themes are not that frequent, but of course it could happen.

Link to comment
Share on other sites

22 hours ago, jploch said:

Does that mean you always stick with the default theme

Yes, I always stick with the default (Uikit theme). You're correct that things don't change that much in the theme files, so long as you're happy keeping track of those and updating then you should be fine - it's just an extra hassle that I am not willing to deal with, but that doesn't mean others shouldn't change themes if they're willing to deal with the possible downsides.

Link to comment
Share on other sites

On 12/4/2020 at 11:30 PM, d'Hinnisdaël said:

Looks great! Thanks for releasing this as a public module.

Does this theme do away with all colors? How does it handle warnings and error states?

Thx! Warnings will display with a yellow (#ffe299) and errors wth a light red (#f8ada5) background

  • Like 2
Link to comment
Share on other sites

22 hours ago, flydev 👊🏻 said:

Just a small issue with TracyDebugger installed. 

23469064_Capturedcran2020-12-0712_54_52.png.f83beb0a7d5689b5274a1375591d6d1c.png

@flydev 👊🏻 you are right, I also noticed this. You can temporarily close tracy with the small arrow to make the save button visible again, but it's inconvinient. I might make the position of the save button configurable via the module settings. Since I also removed some of the save options (like save and next) for a simpler UI, this could also be an option. Not sure how others feel about the old save dropdown functionality, but I always felt it was to complicated and I never used it.

  • Like 1
Link to comment
Share on other sites

40 minutes ago, flydev 👊🏻 said:

Yes thanks, and got his glitch too on ui-button :

2053941181_Capturedcran2020-12-0813_05_24.png.0fc3a6dec4012224344c185d40a8ddf3.png

I never used Padloper, so not sure what is causing this, but Iam happy to accept a pull request. Or you can post the css to fix this here and I will update as soon as I find some time.

Link to comment
Share on other sites

/** this fix seem to fix everyting **/
.InputfieldContent .pw-table-responsive {
  margin: 0 0 10px;
}

 

1043803046_Capturedcran2020-12-0816_10_53.png.b530594b6b6f24a0c2831625cf93be56.png

411872861_Capturedcran2020-12-0816_11_21.png.95789b50fc2b74f241e585e8fa1b9d39.png

 

 

 

@jploch @adrian 

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

 

 

 

  • Like 1
Link to comment
Share on other sites

30 minutes ago, flydev 👊🏻 said:

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

that would be a good solution.
maybe @adrian can implement this in tracy someday 🙂

4 minutes ago, flydev 👊🏻 said:

Thanks, can you force update the modules directory ? (I am lazy sorry)

done 🙂

  • Thanks 1
Link to comment
Share on other sites

6 hours ago, jploch said:

Not sure how others feel about the old save dropdown functionality, but I always felt it was to complicated and I never used it.

Personally I don't use it that often, but when the need arises, it's actually a really nice timesaver, so I wouldn't want to be without it.

  • Like 1
Link to comment
Share on other sites

1 hour ago, flydev 👊🏻 said:

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

I haven't tried this theme yet, but I am assuming the issue is that the save button is floating? Wouldn't that put it on top of input fields sometimes meaning that you need to scroll to see everything? Sorry if I am not picturing how it works.

Anyway, if that's the case and you are planning on keeping that behavior, then I can add a class to the body like you suggest - let me know. One thing to note of course is that Tracy can sometimes have many bars down there - sometimes, the regular, a couple of redirects, plus three ajax bars. The number of ajax bars is also configurable so someone could potentially choose to show more than that - I just wonder if this will make positioning tricky? 

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Rudy
      Hi all 👋
      I made this searchable UIkit 3.x documentation site to share with everyone. The official doc is great but you can't search across the whole doc.
      Anyway, here is the URL: https://uikitdocs.netlify.app/
      What's missing is the live examples. Perhaps some of you can contribute? Github repo link is on the website as well.
      Cheers
    • By Chris Bennett
      https://github.com/chrisbennett-Bene/AdminThemeTweaker
      Inspired by @bernhard's excellent work on the new customisable LESS CSS getting rolled into the core soon, I thought I would offer up the module for beta testing, if it is of interest to anyone.

      It takes a different approach to admin styling, basically using the Cascade part of CSS to over-ride default UiKit values.
      Values are stored in ModuleConfig Module creates a separate AdminThemeTweaker Folder at root, so it can link to AdminThemeTweaker.php as CSS AdminThemeTweaker.php reads the module values, constructs the CSS variables then includes the CSS framework Can be switched on and off with a click. Uninstall removes everything, thanks to bernhard's wonderful remove dir & contents function.
      It won't touch your core. It won't care if stuff is upgraded. You won't need to compile anything and you don't need to touch CSS unless you want to.

      It won't do much at all apart from read some values from your module config, work out the right CSS variables to use (auto contrast based on selected backgrounds) and throw it on your screen.
      You can configure a lot of stuff, leave it as it comes (dark and curvy), change two main colors (background and content background) or delve deep to configure custom margins, height of mastheads, and all manner of silly stuff I never use.

      Have been developing it for somewhere around 2 years now. It has been (and will continue to be) constantly tweaked over that time, as I click on something and find something else to do.
      That said, it is pretty solid and has been in constant use as my sole Admin styling option for all of those 2 years.

      If nothing else, it would be great if it can provide any assistance to @bernhard or other contributor's who may be looking to solve some of the quirkier UiKit behavior.
      Has (in my opinion) more robust and predictable handling of hidden Inputfields, data-colwidths and showIf wrappers.
      I am very keen to help out with that stuff in any way I can, though LESS (and any css frameworks/tools basically) are not my go.
      I love CSS variables and banging-rocks-together, no-dependency CSS you can write with notepad.



       

    • By fruid
      could someone help me find the javascript bug?
      https://codepen.io/bbblgmsp/pen/LYxWJJa
      or here:
      https://foobar.roofaccess.org/carousell/
      I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it.
      It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element).
      I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though…
      Thanks for help
    • By schwarzdesign
      We're currently working on a few sites that have some users with very limited access; most importantly, some users can only edit their own profile and nothing else in the backend. We're using AdminThemeUiKit, so the CMS navbar only contains the site logo and the username for those users. The problem is that the crucial "View site" link that gets you back to the frontend is hidden in the dropdown behind the username. This isn't immediately obvious (and TBH it does feel out of place there, even when you know it's there).
      I'm looking for ways to make the "back to site" link more visible – and I also think this is worth a discussion for AdminThemeUiKit in general. Here's what I have considered:
      Ideally, clicking the logo would take you back to the frontend (currently, you just get a blank page with nothing but an 'edit profile' button). I checked the settings, but the Uikit theme only has options to open the site tree or open a side navigation. Maybe a new option to go back to the frontend could be added? Or maybe the method that gets the logo link should be made hookable, so I could retain the default behaviour for editors, but change the link for users with limited access. An additional link in the menu would also work. But the only way I can think of to add this would be a Process module that just redirects to the homepage. But that's a bit overcomplicated, and I would like to do this without the additional redirect. Of course, copying the theme and modifying it manually or inserting a prominent link with JavaScript would work, but both options are sort of hacky and require some upkeep. Is there a better way? Have you come across this problem yet, and how did you solve it? I'm looking forward to suggestions!
    • By Kai
      REMOVED Free Processwire Template
×
×
  • Create New...