Did you know you can customise the Perch Admin user interface?

This is a guest post by Graham Street from Streets Ahead.

---

Perch CMS provides the ability for you to make simple changes to the Admin interface (Admin UI). I've used it in the past to make the 'help' lines a little bigger, under input fields, for a specific customer. The additional CSS is added via instructions in a well-documented page in the Perch documentation and doesn't impact Perch core code.

The Perch Team have just released version 3 of Perch and Runway. The Admin UI has had a major change - a completely revised user interface that works much better on mobile devices. I like the new interface, it has some great improvements but only a few of my customers have seen it so far. Those that have like the simpler interface that's great for long pages, because you can 'fold up' (toggle/hide) parts of the region that you're not editing. But both they and I have found it's a little more difficult to visually see the different sections and fields, especially inside more complex regions.

I've concluded it is because some of the header backgrounds are very light and perhaps on some screens it's difficult to differentiate between them and the white background. Luckily this is easy to change by simple customisations of the CSS used in the Admin UI.

Using this page as a guide, this is what I did ...

1) Edit /perch/addons/plugins/ui/_config.inc and add this line:

<link rel="stylesheet" href="/perch/addons/plugins/ui/override_ui.css" />

2) Edit /perch/addons/plugins/ui/override_ui.css and add these CSS lines:

form h2.divider {
    background-color: #eeeeee;
    border-top: 1px solid #aaaaaa;
    font-style: italic;
}
form h3.repeater-heading {
    background-color: #efefef;
    font-style: italic;
    font-size: 90%;
    margin-right: 25px;
}

The first change darkens the clickable fields headers, adds a line above them and adjusts the font. The second change does a similar thing for the repeaters header. Here are a couple of images showing the Perch Admin UI, before and after, on one of our customer's sites.

[Click to view larger versions]

---

At this point I should say that I am NOT a designer. There might be better ways to do this that provide a better user experience, but this has worked for me and my customers. What it does show is how flexible the Perch system is, and how easy it is to make minor changes to it.

Graham Street - Streets Ahead