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.)
- Download the latest version of the app.
- Unzip the download
- Place the
- Perch or Perch Runway 3.0 or higher
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.
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:
You can use
pipit_ui_config.php as a template and modify it as you need.
Now you need to tell the app where to get your configuration file
pipit_ui_config.php from. In your Perch config file
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.
A number of developers have open-sourced their admin themes. They are listed in Perchology Links.