Recommended Posts

Admin Theme Boss

A light and clear theme based on Uikit 3

Features

  • Three unique color options
  • Beautiful typografy using Roboto Condensed
  • Extended breadcrumb with edit links
  • Extends AdminThemeUikit, you can continue using all AdminThemeUikit features
  • Option to activate theme for all users

Color Variants:

ProcessWire Blue

alt text

Vibrant Blue

alt text

Dark Black

alt text

Requirements

Requires AdminThemeUikit installed and activated.

$config->defaultAdminTheme = 'AdminThemeUikit';

Installation

  1. Make sure the above requirements are met
  2. Go to “Modules > Add New“
  3. Open “Add Module from URL“ and past the following url: https://github.com/noelboss/AdminThemeBoss/archive/master.zip
  4. Click “Download“
  5. Click “Install“ on the “AdminThemeBoss“ Module


alt text

Install manually

  1. Make sure the above requirements are met
  2. Download the theme files from GitHub or the ProcessWire Modules Repository.
  3. Copy all of the files for this module into /site/modules/AdminThemeBoss/
  4. Go to “Modules > Refresh” in your admin
  5. Click “Install“ on the “AdminThemeBoss“ Module

 

vibrant.png

  • Like 10

Share this post


Link to post
Share on other sites
Posted (edited)

@ryan I have published this theme on the modules repo with the class name AdminThemeUikit in the assumption, it would use my provided title (Admin Theme Boss) as url (and classname) – but now it's listed as https://modules.processwire.com/modules/admin-theme-uikit – what I did not intend. I fear this will lead to confusion, especialy when installing using the backend.

edit: Okay, I found out I am able to change the classname – but the url remains modules/admin-theme-uikit – which would probably be better if you or an admin could change it to modules/admin-theme-boss – Sorry for any inconvenience I might have caused.

This Question Remains: This theme is basically the same as your AdminThemeUikit with slight modifications of the config and of course updated CSS. I used the same classname but a different folder (AdminThemeBoss) on my system since I did not find a way to extend AdminThemeUikit to let existing modules (like AOS) keep using the hooks of AdminThemeUikit. I tried to extend AdminThemeUikit but then, the hooks would not have any effects. How could I use my own classname but still keep the modifications of AOS etc? Any suggestions on how to proceed with the classname? 

 

Edited by Noel Boss
Fixed classname

Share this post


Link to post
Share on other sites

Just a heads up, I did try to install the theme, but it really did a number on the admin side.185036520_ScreenShot2018-07-05at12_23_45PM.thumb.png.01191d868bb3f72587524c6ca4ad83dd.png

Ill have to revert back to a previous state with adminthemeui installed.

Share this post


Link to post
Share on other sites

Hi @louisstephens

I have just updated the GitHub repository with a possible fix. Could you try? You also need to select Uikit as the theme in your profile beforehand…

Share this post


Link to post
Share on other sites

adminboss.thumb.png.a3a659fab20a3a65a251d13afe341ae4.png

This looks so interesting that I had to install it but...

I tried the latest version from Github and the one from module directory.

Share this post


Link to post
Share on other sites

There was an issue with installations in subfolders – wire('config')->urls->AdminThemeUikit returned the subfolder twice, resulting in wrong css urls. The latest release 0.1.4 fixes that as well…

  • Like 1

Share this post


Link to post
Share on other sites

Looks really nice!

Just wondering about the approach you've taken - if this module is about styling changes to the core AdminThemeUikit couldn't the module just add a CSS file containing the style overrides and not reproduce all the AdminThemeUikit files?

  • Thanks 1

Share this post


Link to post
Share on other sites
10 hours ago, Robin S said:

just add a CSS file containing the style overrides and not reproduce all the AdminThemeUikit files

Thats not practical since the "overrides" would need to be at so many places. With Uikit you've got LESS where you inject your colors etc. at various places. You replace code, not just override it. Simple overrides would be much more complicated and and could potentially break on an updated base theme. Replacing the whole CSS makes sence. BUT, you're suggestion just triggered an idea: Publish it as a propper Module and replace the CSS of the AdminThemeUikit with a hook… This way, AdminThemeUikit would still be technically the Theme, but the CSS (and potentially JS) would be entierly replaced by the "Child" Theme. In this way, one would also not need to change Settings etc… Brilliant!

But I think, the required Method is not (yet) hookable… I guess it is hookable, since it's public…

  • Like 3

Share this post


Link to post
Share on other sites

Nice job @Noel Boss ! Already adopted, modified & installed !

I just tweaked it to get a Google look (controls), removed the transparency on dropdown and reversed the fonts and notes.

 

GoogleBoss.thumb.png.b6ad24e544f1481047356dc71a32b006.png

 

GoogleBoss2.thumb.png.a8a3e85785facc148977c7455f9ae9dd.png

  • Like 2

Share this post


Link to post
Share on other sites

Released 0.2.0 + 0.2.1

  • Theme is now a module extending AdminThemeUikit by replacing the CSS
  • This simplifies the installation, simply download the module and install it
  • Added extended breadcrumb with edit links
  • Added option to activate the theme for all users
  • Updated look of checkboxes and radios – thanks @flydev for inspiration
  • Release 0.2.1; Styled login form
  • Like 5

Share this post


Link to post
Share on other sites

Great work! I prefer the default uikit theme but just gave it a try and everything worked.

Here's a kickstartfile if you want to use PW Kickstart to try it out quickly using PW Kickstart:

<?php
/**
 * Sample Kickstartfile
 * 
 * @author Bernhard Baumrock, baumrock.com
 * @version 1
 * 
 * This file returns a php array with settings for the kickstart installer.
 * 
 * The installer instance is available as $this
 * You can access all methods of the installer, eg $this->randomPassword();
 */

$password = $this->randomPassword(16);

return [
  /**
   * url of the processwire installation zipfile
   * current master version: https://github.com/processwire/processwire/archive/master.zip
   * current dev version: https://github.com/processwire/processwire/archive/dev.zip
   * other versions: eg https://github.com/processwire/processwire/archive/3.0.34.zip
   */
  'pw' =>'https://github.com/processwire/processwire/archive/dev.zip',
    
  /**
   * which site profile to use
   * ---
   * options are:
   *  - a pw profile name, eg 'site-blank'
   *  - a local zip folder in the site root, eg 'myprofile.zip'
   *  - an url to a zip file, eg 'https://raw.githubusercontent.com/.../myprofile.zip'
   */
  'profile' => 'site-default',

  /**
   * installation settings
   * ---
   * here you can overwrite the default settings that are set in Kickstart.php
   * see the link below to toggle a list of all default settings
   */
  'settings' => [
    'timezone' => 368, // vienna
    
    // 'dbName' => 'yourdbname',
    'dbUser' => 'root',
    'dbPass' => '', //$this->randomPassword(),
    
    //'admin_name' => 'admin',
    //'username' => 'admin',

    // random password set on top of this file
    //'userpass' => $password,
    //'userpass_confirm' => $password,

    //'dbTablesAction' => 'remove',
  ],
  
  /**
   * here you can set an array of options that is sent to the recipes
   * this makes it possible to define some kind of master recipes hosted on
   * gitlab and execute them with custom settings
   */
  'recipesettings' => [
    'foo' => 'bar',
  ],

  /**
   * recipes that are executed after installation
   * those recipes will get downloaded to the /recipes folder and then executed in order of their filename
   */
  'recipes' => [
    // downloads file to /recipes/sample-recipe.php and executes it
    // 'https://gitlab.com/baumrock/kickstart/raw/master/assets/sample-recipe.php',

    // sample callback as recipe
    function() {
      // $this->msg('Installing AOS...'); // demo
      $aos = $this->installModule('AdminOnSteroids', 'https://github.com/rolandtoth/AdminOnSteroids/archive/master.zip');
      $this->wire->modules->saveConfig($aos, [
        'enabled' => 1,
        'enabledSubmodules' => ['FieldAndTemplateEditLinks'],
      ]);
      
      $tracy = $this->installModule('TracyDebugger', 'https://github.com/adrianbj/TracyDebugger/archive/master.zip');
      $this->wire->modules->saveConfig($tracy, [
        'superuserForceDevelopment' => 1,
        'editor' => 'vscode://file/%file:%line',
      ]);
      
      $this->installModule('AdminThemeBoss', 'https://github.com/noelboss/AdminThemeBoss/archive/master.zip');
    },
  ],
];

 

  • Like 2

Share this post


Link to post
Share on other sites

@Noel Boss thanks for this module. Installed without a problem. Guess it's not yet in the modules directory? What I don't get is what is Extended Breadcrumbs for? The theme is almost 18 MB in size, seems a lot for a few css files? Just for fun, I took uikit.vibrant.css file and used it in AdminThemeDefault config options (Layout + interface, Advanced) and got the look and feel without using your module. Or I miss something?

  • Like 1

Share this post


Link to post
Share on other sites

@matjazp The modules comes with all the source files required by the theme (less files etc) but what's actually included in the backend is only the uikit.variant.min.css file which is about 330k in size. It also needs some code to rewrite the css source file (the required method in AdminThemeUikit is not hookable) and a hook to extend the breadcrumb with edit links…

 

 

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 joshuag
      Hey guys, 
      Thought I would share a quick preview of Designme. A module we (Eduardo @elabx and I) are building for visually laying out your templates/edit screens. 🙂
      This is a really quick, zero polish screen grab. FYI. 
      Video #2 - UPDATE
      This new video shows the following features in Designme:
      Re-arranging fields via Drag & Drop Re-sizing fields via Dragging. Adjusting field settings - with live refresh. Working on "hidden" fields while Designme is active. Creating New fields. Deleting fields. Creating/Deleting Tabs. Dragging fields between tabs. Creating fieldsets. Tagging/Un-tagging fields. Fields without headers expand when hovered (like checkboxes). Live filtering of fields in the sidebar. Ability to adjust (all) Template settings without leaving Designme. Template File Tree Editing Template files source code with ACE Editor. Editing Multiple files with ACE Editor. (New Tabs) Saving files. Techie stuff Fields load their own js/css dependancies. *ready to use on creation (*most fields)  Everything happens via Ajax to ProcessPageEdit (via module + hooks). Designme has a JS api that you can use.  All actions trigger events.  We would love any detailed feedback on what you see so far. If you are interested in testing Designme. Let me know below. 🙂
       
       
      Video #1. 
       
    • By matsn0w
      Hey all,
      I am working on a website and I want to style the login page, but I'm a bit confused. 
      I want either the existing login page styled in my own way using some CSS (I guess I prefer that) or I want to create a custom page with a form to login. (Which I could style too).
      I used the code from Ryan and Renobird posted here - which works great - but that doesn't replace the original login page. 
      Is there a way to some sort of 'disable' the original login?
      I hope my question is clear and thanks in advance,
      matsn0w
    • By msavard
      Is the UIKit admin theme supposed to look like this when editing fields and templates? It seems like I did something wrong.
       

    • By Jimmie Bragdon
      Wondering if anyone can help me get past a sticking point.  
      I'm setting up a Processwire instance in a multiple site setup (using Soma's multisite) to run several related websites.  I am getting stuck on the tagging system that I am using (adapted from a standalone PW site I'm running).  I have the tags themselves set up as Pages, and the Tags field on the related pages is and ASMselect field that populates based on the pages underneath /tags/ in the tree.  This system works fine on the standalone site.
      Where I am running into issues, is with trying to use them with the multisite setup.  Specifically, choosing the proper subset of pages for tags on the ASMselect input tab.  I want to choose only the tag pages for the site in question.  
      My tree is laid out like this:
      Multisite / 
                | site1.com
                     | subsections
                | site2.com
                     | subsections
                | Tags
                     | site1.com
                          | tagA
                          | tagB
                     | site2.com
                           | tagC
      So far, the best I've been able to do is to use  'parent.has_parent=/tags/' in the Custom Find or Selector String portion of the Selectable Pages section of the input.  This gives me the options of choosing tagA, tagB, or tagC on a page under site1.com.  What I'd like to find is a selector that allows me to only see tagA, tagB as options from a page under site1.com and only tagC on a page under site2.com.
      Elsewhere in my php templates, I'm using $page->rootParent->title to set the proper scope and URLs for things, but I have not found a way to get that to work in this field input setup.  I am trying to avoid creating specific fields and templates for each site, as unified templates were part of the purpose of going with a multisite install.
       
      Thanks in advance for any ideas.