Jump to content

IP.Board 3.2.0: New AdminCP Style

One of the primary areas we have targeted for improvement in IP.Board 3.2 is a fresh style and usability improvements for the AdminCP. Our AdminCP has long been considered one of the best in the industry, so while we didn't want to tear up that work and start again, we did feel it was time to make substantial improvements.


First, let's take a look at a general overview of the new style:

As you can see, we've tidied up the header area. The live ACP search, which has been a hit feature, has been made more prominent (more on that later). The 'button bar' that many pages make use of has been styled more like a toolbar in a traditional application. Many other general aspects have been tweaked, such as improved typography, removing various bits of clutter on the screen and updating the drag handle to the standard used in places like GMail.

Sidebar / Menu

In 3.0/3.1, the sidebar is the primary way of navigating through an application. The downside of this is if I'm in the Forums app and I want to, for example, edit a member, I first have to click the Members app, then find the item in the sidebar, and finally arrive at the page I wanted.

We felt for an app of the size of IP.Board, more effective navigation could be done by using multi-level dropdown menus:

This makes it really speedy to get wherever you need to get. You can even navigate to your non-core applications:

The sidebar can be hidden, giving you more space on your screen for the important content. I've been using the new menu system for weeks, and I certainly couldn't imagine going back to using the sidebar as the primary navigation method. I hope this makes routine administration tasks noticeably easier for everyone.

New Item Menus

In 3.0, item rows that have additional options are displayed using the icon. While this works fine (especially when there's many options), it could be made quicker if the primary actions were buttons in their own right.

IP.Content and IP.Nexus have had the new item menus for some time, but they're now used throughout IP.Board. Primary actions (such as Edit and Delete) are displayed as buttons, while less-frequently used options remain in a dropdown menu. The row you are hovering on highlights itself for easy identification:

(Fun fact: this menu system is generated entirely with CSS3 - so it's incredibly easy for mod authors to reuse)

New Tab Bar

In IP.Board, many sections use tab bars for situations where you can edit all of your applications at once (for example, the Tools & Settings section). However, problems arise when you install lots of extra applications - the tabs can spill out of the bar and break the page layout.

To resolve this, we have added a new style of tab bar, that comfortably displays as many apps as necessary. By default, it looks like a standard tab bar:

But when many apps are installed and your browser window is not large enough to display them all, it adds smooth scrolling controls:

New Form Style

Though not a major change, we have updated forms throughout the ACP to use a slightly different layout. In 3.0, field descriptions were displayed under the field title. Where fields had long descriptions, this was unwieldy, and contributes to making forms more difficult to use than they should be.

In 3.2, we have updated the styling so that field descriptions appear directly under the field they relate to. Field titles meanwhile are right-aligned, making it really easy for your eye to travel the page and identify items:

New Live Search

I mentioned earlier that the ACP live search had been made more prominent in the interface. We hadn't expected it to be quite as popular as it is, so in 3.2, we've improved the display of the results box. Often, a search would have dozens of results, which made them difficult to scan through to find the relevant one. Live search in 3.2 breaks down the display into sections, like so:


We hope that the new navigation system and live search really makes finding what you need highly efficient, so you can get on with doing the important tasks. We hope the cosmetic and usability tweaks makes performing those tasks just a little bit easier. And, of course, we hope you like the overall styling we are going for.

Feel free to comment on this blog entry below or, if you have feedback unrelated to this blog entry, start a new topic in our feedback forum. Be sure to check the What's New in IP.Board 3.2 topic for a running list of announced changes!

  • Create New...