Dane. Designer.

Old Blog

Styling Admin Interfaces

In styling for the K2 Sidebar Manager page, I’m constantly having to work against the native WordPress stylings to achieve what I want. Whether this is because of styled form elements—a major pain in the ass—or simply an unexpected line-height, it inevitably causes some frustration when I’m trying to make things just right.

The valuable lesson here, and this goes for any other up-and-coming platforms as well: Keep your elements in containers and style specifically for those containers.

So, instead of simply styling p, div {line-height: 140%}, divide your pages into header, content and footer, or whichever configuration suits you the best. Then make sure you only style specifically for your containers, like so: .content p, .content div {line-height: 140%}.

That way, when people need to create something like the Sidebar Manager UI, they simply create a new container with the class of ‘SBM’, at the same level as the other containers, and they don’t have to worry about that 140% line-height.

JournalMichael Heilemann