Usability Accessory for ExpressionEngine 2

I really do love ExpressionEngine, and there are some great improvments in ExpressionEngine 2, but the control panel re-design does not suit my taste. The 1.6.x control panel was snappy, clean, and clear. EE2’s control panel doesn’t have the same feel to me yet. But it can be greatly improved with two add-ons right out of the box, and I’ve made a third which addresses some minute, yet pesky details. If you like extra clarity you might want to check out this accessory.

But first…there are several add-ons that are part of my ExpressionEngine base install, and there are two that I include for purely cosmetic reasons:

• NSM Morphine Theme
• Anti-Pink

Highly recommended!

But there were still some things irking me, so I decided to use Jacob Russel’s example of Anti-Pink and make some further CSS tweaks using an accessory (a cool new feature in EE2, they are easy to create). While there are loads of details I’d like to alter, the immediate need was for the following:

1. Clearer text inside of input and textarea fields in the control panel.
2. Appropriate value for the cursor property on clickable or draggable elements.
3. Restore the drag-handles on custom fields when using publish layouts (NSM Morphine removes them).

Number 1 was accomplished by darkening the text (it was too low-contrast!) and going with a monospace font which makes thing easier to read (important when typing settings or system names). I left the publish form input font as-is (Arial). Number 2 I’m a bit of a stickler for. If something is clickable the cursor should change when you hover it! Number 3 took a bit for me to realize, and even though you can still re-order custom fields without the visual cue of a drag-handle, I like having them back in.

If you want a quick, simple enhancement for the control panel, try out my Usability accessory for ExpressionEngine 2. You might find that it is a quick way to start adding your own tweaks to the control panel.

Before:

After:

Download the accessory here.