Jump to content

Recommended Posts

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

alt text

pw-login.png

 

Dark Black

black-pt.png

black-login.png

 

Vibrant Blue

alt text

 

Happy Pink

pink.png

Smooth Green *new with 0.6.1*

alt text

 

Requirements

Requires a current ProcessWire version with AdminThemeUikit installed and activated.

Installation

  1. Make sure AdminThemeUikit is activated
  2. Go to “Modules > Site > Add New“
  3. Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“
  4. Click “Download And Install“
  5. On the overview, click “Download And Install“ again…
  6. On the following screen, click “Install Now“


alt text

Manual Installation

  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
  • Like 13
Link to comment
Share on other sites

@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
Link to comment
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
Link to comment
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 4
Link to comment
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
Link to comment
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:

Spoiler

<?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 3
Link to comment
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
Link to comment
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…

 

 

Link to comment
Share on other sites

  • 2 months later...

I really love your Theme but I don't know if it is right to use it because the Uikit version you use, is outdated. Right now there is a RC17 version. Also I think Ryan made some additions in the AdminThemeUikit, do you plan to be on par, if something changes or is added?

  • Like 1
Link to comment
Share on other sites

Thanks @jmartsch – I am using the theme myself so I should keep it updated… Since the theme just replaces the CSS, this should normaly be no problem…

Just released 0.3.0 with uikit 3.0.0-rc.17 and a new way how CSS and the logo is injected (as actual theme config values for AdminThemeUikit instead of rewriting the html output)

I will release 0.3.1 soon with the latest AdminThemeUikit Changes incorporated (work in progress)

  • Like 2
Link to comment
Share on other sites

Thx for the heads-up noel. I just tried your theme again and found this little bug:

R3wvVc8.png

 

On 7/5/2018 at 5:58 PM, Noel Boss said:
  • Three unique color options
  • Beautiful typografy using Roboto Condensed
  • Extended breadcrumb with edit links
  • Extends AdminThemeUikit, you can continue using all AdminThemeUikit features

Very nice!

Why are there three colors? Could you describe a bit how you created thos color variants? What is necessary to add a new custom color? Is everything replaced by hand in the css? Or is there some less/sass files? The reason why I'm asking is because it would be great to have the option to change some colors just by selecting one.

  • Like 1
Link to comment
Share on other sites

It would be nice, if this theme would be selectable as an option on the user profile page instead of replacing the standard Uikit theme.

An option to use the normal unmodified AdminThemeUikit would also be good in my opinion.

Link to comment
Share on other sites

Hello Friends…

New Version 0.4.0 released. I try to answe a few questions.

On 10/9/2018 at 6:21 PM, bernhard said:

Could you explain that a little bit more detailed, please?

How the theme works:

PATHS ARE OUTDATED - THE CONCEPT MORE OR LESS THE SAME. (will update soon)

The variations & Ryans work:

It uses the built in uikit feature to create themes. Theme variations can be defined in uikit/themes.json. In my case, I define 3(+1) themes: black, blue and vibrant blue.
These relate to "entry points" found under ./uikit/custom/antrypoint.less » like uikit/custom/pw.less or black.less or vibrant.less

Each one of these basically only defines the custom accent colors and include all other general variables and some overrides:

// uikit source
@import "../src/less/uikit.theme.less";

// main accent color:
// pw color
@theme-primary-color: #3584EA;
@theme-primary-color-rgba: rgba(53, 132, 234, 0.6);

// Original Theme
@import "../../AdminThemeUikit/pw/_import.less";

// AdminThemeBoss Custom Styles
@import "fonts/fonts.less";
@import "theme/main.less";

In the newest Version (0.4.0) I actually grab ryans code (uikit and other custom stuff) and include my own customizations (variables etc) after that, this should ensure that the theme stays as compatible as possible. Of yourse if ryan changes major stuff, this needs to be addressed sperately. The Main File is uikit/custom/theme/main.less

Ryans stuff can be found under ./AdminThemeUikit/ – it's a copy of the custom folder of his Module. There is a new ./upgrade-theme.sh that automates that stepp…

Compiling the css

Compiling is done using npm or yarn using webpack from the uikit folder. It's easy:

$ cd uikit
# grab node modules:
$ yarn
# compile
$ yarn compile-less
# or for development:
$ yarn watch

Injecting the css:

Before 0.3.0 I search and replaced Ryans CSS in the html using a hook. Since 0.3.0 i only set parameters of AdminThemeUikit:

cssURL and logoURL

1137887888_Screenshot2018-10-11at15_21_42.thumb.png.f49f8c8ea3762b377b798ed1fa821ef7.png

So no messing arround with unstable HTML…

Why not an actual Theme?

On 10/10/2018 at 9:22 PM, jmartsch said:

It would be nice, if this theme would be selectable as an option on the user profile page instead of replacing the standard Uikit theme.

Tldr; For compatibility & flexibility reasons

Longer Version: Because if I make AdminThemeBoss an actual standalone theme, I lose compatibility with Ryans AdminThemeUikit … By only working on top of his theme,  all new features he includes will still (and instantly) be working with AdminThemeBoss without an upgrade because my theme is mostly only css. Also, I can not hook into his functions for example to extend the breadcrumb if I build my theme as a standalone theme.

Why these color variations?

On 10/9/2018 at 6:19 PM, bernhard said:

Why are there three colors?

Now there are 4 😉

» Black: Because I our basic Corporate Design is mostly black and white
» Processwire Blue: Because obvious I it would be cool to retain some relation to PW CD
» Bright Blue: To have something fresh and because I like it 😉
» And a new Happy Pink version because of C43H66N12O12S

  • Like 3
Link to comment
Share on other sites

Great, thx for the heads-up!

So that means it would be very easy to improve your module to use the default theme (by ryan) and adjust some variables via inputfields. These Inputfields could - in the easiest implementation - be regular text fields (one field for each adjustable less variable). Or it could be a textarea field where we can copy something like this:

@theme-primary-color: #3584EA;
@theme-primary-color-rgba: rgba(53, 132, 234, 0.6);

Just include a php less parser: https://github.com/oyejorge/less.php

$parser = new Less_Parser();
$parser->parseFile( '/var/www/mysite/ryansbasictheme.less' );
$parser->parse( '@theme-primary-color: #3584EA; @theme-primary-color-rgba: rgba(53, 132, 234, 0.6);' );
// the line above would take the inputfield values, it's just to show how easy it is to parse the less with custom php variables
$css = $parser->getCss();

Then we'd only have to tell the regular theme to take this new CSS as stylesheet. Maybe you could define this as option (color1, color2, color3, custom less).

And it would be easy to customize the admin for everybody very easily and fast - and without any source compilation. Ah, of course the creation of the CSS would have to be done once when changing values. It would be totally imperformant on every page load. 

 

50 minutes ago, Noel Boss said:

And a new Happy Pink version because of C43H66N12O12S2

If I understand that correctly: Congrats! 😉 🎉🎉

Link to comment
Share on other sites

@bernhard

On 10/9/2018 at 6:19 PM, bernhard said:

The reason why I'm asking is because it would be great to have the option to change some colors just by selecting one.

I agree that would be awesome. I thought about this as well but didn't force it because I'm not sure if this would work since the current process of compiling goes trough npm/yarn > webpack – there's probably a lot of magic going on there…

 

1 hour ago, bernhard said:

If I understand that correctly: Congrats! 😉 🎉🎉

Nothing special happened right now, but it's still a great hormone 😉 

 

Link to comment
Share on other sites

2 hours ago, bernhard said:

Doesn't sound like you are eager to try it out? 😉

Would love to, but it's not a priority for me right now and I don't have time. But since I documented how it works, I'm open to implement it if someone finds a way…

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 Robin S
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • 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 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 :)
×
×
  • Create New...