Jump to content
bcartier

Subtle Admin Theme

Recommended Posts

I've been working on a version of the core theme based on some proposals in the forums on a new processwire.com design. It's entirely derived from the default theme and inspired by ideas around a new ProcessWire look and feel. 

I wanted something that I'd be proud to show clients,  and something that could draw developers to ProcessWire who might have been turned off by the default admin UI.

This was created by working from the default theme, and developed organically over time. It's not coded in the most efficient way, but I hope it's useful for some of you. I'd love to see a cleaner look in the default theme. Ryan, if you see anything you like, please steal it!  Likewise if you see anything you think could be improved,  I'm all ears. 

-Brent

 

 

01-tree.jpg

02-page-edit-matrix.jpg

03-fields.jpg

04-lister.jpg

AdminThemeSubtle.zip

  • Like 13

Share this post


Link to post
Share on other sites

My main issue with any of the themes is usually colors. I'm using classic now and do some inspecting and CSS search and replace if it changes. Used Reno for a while but classic is always in sync with the latest features.

If it was just for me I'd tone down the shocking pink and use a more natural green but currently I'm only making the selected tab's edges 10% darker and field separation lines 3% darker. With the default colors one client, new to Processwire, did not perceive the page editor tabs (content, children...) as tabs.

Share this post


Link to post
Share on other sites

My main focus was to reducing visual clutter and to add whitespace to help convey hierarchy, grouping and meaning of elements. 

I'd like to extend this theme to prove several colour combinations (like AdminThemeDefault does). I went with this colour scheme hoping it might tie in nicely with the proposed redesign of the processwire.com website  (especially the dark concepts)

  • Like 1

Share this post


Link to post
Share on other sites

I liked it very much, @bcartier! Great job!

One thing I'd like to suggest is to check the contrast ration between the light gray texts (tree items and breadcrumbs) and their background. Some people may find it harder to read.

Edit: also check the menu links' contrast as well. :)

Share this post


Link to post
Share on other sites

I've just tried this on 2.8, but it appears the module doesn't work. I get the following error:

Configurable module check failed for AdminThemeSubtle, retrying...

 

Share this post


Link to post
Share on other sites

Sorry Mike - I built it based on v3. I'll see if I can get it working for 2.8...

Share this post


Link to post
Share on other sites

Interesting - I wonder what could cause it to throw an error as the only realy difference between 2.8 and 3.0 is namespace support...

Share this post


Link to post
Share on other sites

To get it to work in 2.8, the "namespace ProcessWire;" at the top of each file needs to be removed.

The configurable module check error is thrown because the module doesn't have a getModuleConfigInputfields method. ",ConfigurableModule" needs to be removed from the implements declaration.

After those two steps, it works fine in 2.8 (albeit with the missing fonts issue Mike mentioned).

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 sambadave
      Hi there
      Short version of question
      Let's say I have a page in the admin that contains a field... Is it possible to output the content from that field on another page in the admin? Almost like a reference.
      Longer version of question (with example)
      A house builder with multiple (60+) developments. They want to be able to create notices/messages that can be added to one or many developments. Handy for things like regional covid lockdowns or temporary office closures due to bad weather.
      My approach for the admin editing options:
      Add each message to each development
      Pros: You edit the message on the development page in context
      Cons: Very time consuming and repetitive if the same message needs to be applied to 60+ developments
        Control all the messages from one admin page and say which development each message should be applied to
      Pros: Easier to add/remove messages to more than one development at a time. Control all messages from one place.
      Cons: Content is not added on development page, which is where typical admin users may expect to find it I went for option 2 due to flexibility, and created a page within the admin for global development notices. This contains a repeater with:
      Field for message to display Checkbox list of all developments. The user can select which ones to apply each message to It's working really well but the only thing is that if the user goes to a specific development in the admin, the relevant messages aren't displayed in context (as they aren't edited on that page and instead on the global development notices page)... which may cause confusion when a new staff member / content admin tries to edit the text but there is no field when they go to the development admin page where they expect to see it...
      Solution???
      I don't require the message(s) to also be editable on the development page, but I wondered if there was a nice way to show it/them somehow. I feel like I am missing something really simple as I'm sure ProcessWire will have a nice way of achieving this, or maybe there are field settings that allow this kind of thing to happen?
      Any ideas on approaches or similar experiences would be much appreciated, even if it is just a much simpler example with the content from one field being shown on another admin page to get the ball rolling.
      Thanks in advance for any advice :)
    • By Kai
      REMOVED Free Processwire Template
    • By jploch
      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

      Direct access to page tree navigation inside dropdown

      Page tree

      Options to customise the ui

      Login (inspired by AdminThemeBoss)

      Requirements
      Process Wire 3.0.100 or greater
      Installation
      Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“ Go to your user profile page and change the theme to Admin Theme Canvas
    • By humanafterall
      Hi,
      I would like to set an admin template to 'https only' as recommended in the Processwire security docs.
      However if I do this it forces this setting locally too, resulting in https://localhost requests which result in an error page.
      Is there a simple way round this? Setting https for templates in the config?
      Thanks!
    • By DanielKit
      Hi. I'm currently stuck at the login page in my project. Once I enter my admin username and my password and press login, nothing happens. The page just reloads. However, the URL changes from http://myipaddress/processwire to http://myipaddress/processwire/?login=1. I've checked all of my server settings, and to my knowledge, all seems to be fine there. I don't know where to go from here.. Thanks in advance!
×
×
  • Create New...