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 Andi
      Getting a little deeper into the ProcessWire state-of-mind here. I seriously think I wouldn't have come back to webdev if it wasn't for this wonderful little gem of a CMS.
      I have an "Options" field added to all users on a site. If the user has anything other then "default" selected, I would like to show a permanent message in the admin like the one in the screenshot, only so that the user can't close it. As a friendly reminder that he changed that option from default to something crazy 🙂
      I've read up on how to send messages to users, but where would I hook into to make this show up all the time in the backend?
      https://processwire.com/api/ref/wire/message/
      Thanks in advance!

    • By BitPoet
      Here's a small new module that adds a "Manage tags" button to the template list, just like the field list already has.
      Easily add, remove and change tags for your templates.
      https://github.com/BitPoet/TemplateTagsEditList

    • By Noel Boss
      👋 PW Pros…
      I have some hooks that I need to bind at the init phase (or even __construct) and I was wondering, and I couldn't find a good and simple way to determine if I'm in the admin. Would be nice if there is a reliable short option to do so, but I can't seem to find one… Is there a coherent way to tell this no matter where I am?
      Right now, I use the following method inside one of my modules:
      public function isAdmin($page = null) { if ( strpos($this->input->url, $this->urls->admin) !== false || $this->process instanceof ProcessPageList || $this->process instanceof ProcessPageEdit || ($page instanceof Page && $page->rootParent->id == $this->config->adminRootPageID) ) { return true; } return false; } @ryan wouldn't it be nice to have something like wire()->isAdmin(); like wire()->user->isLoggedin(); to tell if we are in admin – very early on (probably even in __construct() phase of modules?
    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories. 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Five unique color options Beautifully redesigned login screens Modern typography using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users Compatibility with AdminOnStreoids and other third party modules   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Smooth Green *new with 0.6.1*

       
      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ 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“

      Manual Installation
      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
×
×
  • Create New...