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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
34 minutes ago, adrian said:

Am I the only one that feels this way?

Feel a bit this way too. 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Super theme 🤩

A simple tips. If you are using - the must have module - BreadcrumbDropdowns from @Robin S, it will work with this theme once you put this config line in the module config :

AdminThemeCanvas::renderBreadcrumbs

👍

  • Like 4

Share this post


Link to post
Share on other sites
4 hours ago, flydev 👊🏻 said:

the must have module - BreadcrumbDropdowns

Completely agree - it's a must on every site.

  • Like 1

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
1 hour ago, jploch said:

I never used Padloper

It's not tied to only PadLoper but to ProcessModule in general. For example, Profiler has the same issue with this theme.

320043743_Capturedcran2020-12-0814_53_02.png.1c18052b987ffc403a4282528390df1e.png

Share this post


Link to post
Share on other sites

@flydev 👊🏻 still can't reproduce this. The modules I tested so far seem to work. Where can I find this Profiler module you are talking about? Can you send me a classname or github link to a module with this bug?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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? 

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 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
    • By jploch
      Hey folks,
      Iam working on a new Admin Theme, based on AdminThemeReno, which I would like to release for the public soon.
      Now I want to style the login page to fit the look and feel of the backend.

      After some research, I found out that I have to set the "$config->defaultAdminTheme = 'AdminThemeName' " inside my site config.php file to load all the styles from my admin theme on the login page instead of the default ones.
      Is it possible to set this via api from my Admin Theme settings, without the need of editing the config file?
       
    • By modifiedcontent
      Small annoyance: I get a horizontal scrollbar in UIkit admin area - or actually Admin Theme Boss based on Uikit 3. I tried to fix it with CSS, but had trouble isolating/targeting it and don't want to mess with module or core files. I think this issue has been reported before. Is there a recommended fix? 
    • By Noel Boss
      » A more exhaustive version of this article is also available on Medium in English and German «
      First, we'd like to thank the very helpful community here for the excellent support.
      In many cases we found guidance or even finished solutions for our problems.
      So a big THANK YOU!!!
       
      We are pleased to introduce you to the new Ladies Lounge 18 website. The next ICF Women’s Conference will take place in Zurich and several satellite locations across Europe. We embarked on bold new directions for the development of the website — in line with the BRAVE theme.

      Ladies Lounge 18 — ICF Woman’s Conference website on Processwire ICF Church is a European Church Movement that started 20 years ago in Zurich and since experienced tremendous growth. There are already well over 60 ICF churches across Europe and Asia. ICF is a non-denominational church with a biblical foundation that was born out of the vision to build a dynamic, tangible church that is right at the heartbeat of time.
      With the growth of the Ladies Lounge from a single-site event to a multi-site event, the demands and challenges to the website have also increased. A simple HTML website no longer cuts it.
      Simplified frontend Our goal with the development of the new site was it to present the different locations — with different languages and partly different content — under once uniform umbrella — while at the same time minimising the administrative effort. In addition to the new bold look and feel, this year’s website is now simpler and easier and the information is accessible with fewer clicks. 
      Some highlights of the new website
      Thanks to processwire, all contents are maintained in one place only, even if they are displayed several times on the website 100% customised data model for content creators Content can be edited directly inline with a double-click:  

      Multi-language in the frontend and backend Dynamic Rights: Editors can edit their locations in all available languages and the other content only in their own language Easy login with Google account via OAuth2 Plugin Uikit Frontend with SCSS built using PW internal features (find of files…) Custom Frontend Setup with Layout, Components, Partials and Snippets Only about 3 weeks development time from 0 to 100 (never having published a PW before) Despite multi-location multi-language requirement, the site is easy to use for both visitors and editors:  
       
        The search for a good CMS is over It’s hard to find a system that combines flexibility and scope with simplicity, both in maintainance and development. The search for such a system is difficult. By and large, the open source world offers you the following options:
      In most cases, the more powerful a CMS, the more complex the maintenance and development
      It is usually like that; The functionality of a system also increases the training and operating effort — or the system is easy to use, but is powerless, and must be reporposed for high demands beyond its limits.
      Quite different Processwire : You do not have to learn a new native language, you don’t have to fight plugin hell and mess around with the loop, you don’t have to torment yourself with system-generated front-end code or even learn an entierly new, old PHP framework .
      All our basic requirements are met:
      Custom Content Types Flexible and extensible rights-management Multilanguage Intuitive backend Well curated Plugin Directory Actually working front-end editing Simple templating with 100% frontend freedom In addition, Processwire has an exceptionally friendly and helpful community. As a rule of thumb, questions are answered constructively in a few hours . The development progresses in brisk steps , the code is extremely easy to understand and simple. Processwire has a supremely powerful yet simple API , and for important things there are (not 1000) but certainly one module which at least serves as a good starting point for further development. Last but not least, the documentation is easy to understand, extensive and clever .
      Our experience shows, that you can find a quick and simple solution with Processwire, even for things like extending the rights-management — most of the time a highly complex task with other systems.
      This is also reflected positively in the user interface. The otherwise so “simple” Wordpress crumbles when coping with more complex tasks. It sumbles over its apparent simplicity and suddenly becomes complex:
       
      Old vs. New — Simple and yet complicated vs. easy and hmmm … easy
          Our experience with Processwire as first-timers
      Before we found out about Processwire, we found CraftCMS on our hunt for a better CMS. We were frustrated by the likes of Typo3, WP or Drupal like many here. CraftCMS looked very promising but as we were digging deeper into it, we found it did not met our requirements for some big projects in our pipeline that require many different locations, languages and features. Initially we were sceptical about Processwire because;
      A. CraftCMS Website (and before UiKit also the admin interface) simply locked much nicer and
      B. because it is built on top of a Framework
      It was only later, that we found out, that NOT depending on a Framework is actually a very good thing in Processwire's case. Things tend to get big and cumbersome rather then lean and clean. But now we are convinced, that Processwire is far superior to any of the other CMS right now available in most cases.
      The good
      Processwire is the first CMS since time immemorial that is really fun to use (almost) from start to finish— whether API, documentation, community, modules or backend interface. Every few hours you will be pleasantly surprised and a sense of achievement is never far away. The learning curve is very flat and you’ll find your way quickly arround the system. Even modules can be created quickly without much experience.
      Processwire is not over-engineered and uses no-frills PHP code — and that’s where the power steams from: simplicity = easy to understand = less code = save = easy maintanance = faster development …
      Even complex modules in Processwire usually only consist of a few hundred lines of code — often much less. And if “hooks” cause wordpress-damaged developers a cold shiver, Hooks in Processwire are a powerful tool to expand the core. The main developer Ryan is a child prodigy — active, eloquent and helpful.
      Processwire modules are stable even across major releases as the code base is so clean, simple and small.
      There is a GraphQL Plugin — anyone said Headless-CMS?!
      Image and file handling is a pleasure:
      echo "<img src='{$speaker->image->size(400, 600)->url}' alt='{$speaker->fullname}' />"; I could go on all day …
      The not soooo good
      Separation of Stucture and Data
      The definition of the fields and templates is stored in the database, so the separation between content and system is not guaranteed. This complicates clean development with separate live- and development-environments. However, there is a migration module that looks promising — another module, which is expected to write these configurations into the file system, unfortunately nuked our system. I'm sure there will be (and maybe we will invest) some clever solutions for this in the future. Some inspiration could also be drawn here, one of the greatest Plugins for WP: https://deliciousbrains.com/wp-migrate-db-pro/
      Access rights
      The Access-Rights where missing some critical features: Editors needed to be able to edit pages in all languages on their own location, and content on the rest of the page only in their respective language. We solved it by a custom field adding a relation between a page the user and a role that we dynamically add to the user to escalate access rights;
      /** * Initialize the module. * * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called * when ProcessWire's API is ready. As a result, this is a good place to attach hooks. */ public function init() { $this->addHookBefore('ProcessPageEdit::execute', $this, 'addDynPermission'); $this->addHookBefore('ProcessPageAdd::execute', $this, 'addDynPermission'); } public function addDynPermission(HookEvent $event) { $message = false; $page = $event->object->getPage(); $root = $page->rootParent; $user = $this->user; if ($user->template->hasField('dynroles')) { if ($message) { $this->message('User has Dynroles: '.$user->dynroles->each('{name} ')); } // for page add hook… if ($page instanceof NullPage) { // click new and it's get, save it's post… $rootid = wire('input')->get->int('parent_id') ? wire('input')->get->int('parent_id') : wire('input')->post->parent_id; if ($message) { $this->message('Searching Root '.$rootid); } $root = wire('pages')->get($rootid)->rootParent; } elseif ($page->template->hasField('dynroles')) { if ($message) { $this->message('Page "'.$page->name.'" has Dynroles: '.$page->dynroles->each('{name} ')); } foreach ($page->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of page "'.$page->name.'"'); } $user->addRole($role); } } } if (!($root instanceof NullPage) && $root->template->hasField('dynroles')) { if ($message) { $this->message('Root "'.$root->name.'" has dynamic roles: '.$root->dynroles->each('{name} ')); } foreach ($root->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of root page "'.$root->name.'"'); } $user->addRole($role); } } } } } With the Droles and Access Groups Modules we were not able to find a solution.
      I thought it was hard to get absolute URLs out of the system — Ha! What a fool I was. So much for the topic of positive surprise. (Maybe you noticed, the point actually belongs to the top.)
      But while we’re at it — that I thought it would not work, was due to a somewhat incomplete documentation in a few instances. Although it is far better than many others, it still lacks useful hints at one point or another. As in the example above, however, the friendly community quickly helps here.
      processwire.com looks a bit old-fashioned and could use some marketing love. You notice the high level to moan with Processwire.
      There is no free Tesla here.
      Conclusion
      Processwire is for anyone who is upset about any Typo3, Wordpress and Drupal lunacy — a fresh breeze of air, clear water, a pure joy.
      It’s great as a CMF and Headless CMS, and we keep asking ourselves — why is it not more widely known?
      If you value simple but clean code, flexibility, stability, speed, fast development times and maximum freedom, you should definitely take a look at it.
      You have to like — or at least not hate PHP — and come to terms with the fact that the system is not over-engineerd to excess. If that’s okay with you, everything is possible — with GraphQL you can even build a completely decoupled frontend.
      We are convinced of the simplicity of Processwire and will implement future sites from now on using it as a foundation.
      Links & resources we found helpful
      API documentation and selectors API cheatsheet pretty handy, not quite complete for version 3.0 Captain Hook Overview of Hooks Weekly.PW newsletter a week, exciting Wireshell command line interface for Processwire Nice article about Processwire Plugins & Techniques that we used
      Custom Frontend Setup with Uikit 3 and SCSS, and Markup Regions Uikit Backend Theme ( github ) Oauth2 login modules In-house development Login with E-Mail Pro Fields for repeater matrix fields (infos, price tables, daily routines) Wire upgrade to update plugins and the core Wire Mail Mandrill to send mails FunctionalFields for translatable front-end texts that are not part of a content type (headings, button labels, etc.) Runtime markup for dynamic backend fields (combination of first and last name) Tracy debugger for fast debugging Textformatter OEmbed to convert Vimeo and Youtube links into embed codes HideUneditablePages thanks to @adrian  
       
×
×
  • Create New...