UI Loader app

The UI loader app enables you to load admin UI assets (CSS, Javascript and favicon). The app comes with zero UI assets. It just loads them for you.

Why?

While Perch has a built-in way to allow you to load your admin UI assets to customise the control panel without the need of a third-party app, Perch (as of v3.1.4) does not load these assets in the <head> as Jay George notes in the readme of his Perch admin styling app.

This results in a “flicker” as the stylesheet is output after the body. While this may not be an issue for small CSS modifications, if you load even a moderate amount of CSS, traversing the admin quickly becomes distracting.

This is also mentioned in Perch’s UI Customisations docs:

(We appreciate that the end of the page is not the most super-ideal place to be adding new CSS files. If making big changes where this could be an issue, it may be betting to look at implementing your code with an app instead.)

Installation

Requirements

Configuration

The app does not care where you place your files as long as they can be loaded in the browser. So you need to tell the app what you want to load.

1. Create your UI Loader configuration file

This file can be called anything you want and can be placed any where you want.

A good place would be /perch/addons/plugins/ui as this is where you would add your _config.inc if you were loading the UI assets in the normal way.

You can add multiple CSS and JS files:

return [
    'css' => [
        '/perch/addons/plugins/ui/my_css_file.css',
        '/perch/addons/plugins/ui/my_css_file_2.css'
    ],

    'js' => [
        '/perch/addons/plugins/ui/my_javascript_file.js'
    ],

    'favicon' => '/assets/img/favicon.ico',
];

You can use pipit_ui_config.php as a template and modify it as you need.

Note: loading Javascript files in the way outlined in Perch docs should be adequate in most cases. Nonetheless you can choose to load your Javascript files through the app too.

2. Add the configuration file path

Now you need to tell the app where to get your configuration file pipit_ui_config.php from. In your Perch config file perch/config/config.php:

define('PIPIT_UI_LOADER_FILEPATH', PERCH_PATH . '/addons/plugins/ui/pipit_ui_config.php');

So you are in control over what the pipit_ui_config.php is named and where it is placed.

Looking for admin themes?

A number of developers have open-sourced their admin themes. They are listed in Perchology Links.

link