Jump to content
Rikki
 Share


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.

Overview

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:



Summary

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!

 Share

Comments

Recommended Comments



[quote name='mat206' timestamp='1298550026']
[quote name='Matt' timestamp='1298491135']I think whatever colour we went for we'd still polarize opinion. Color is a personal thing so it's hard to "please" everyone. Obviously all you have is a few screen shots to go on. Trust me, it looks great in the flesh. Striking and bold.


The Admin CP is, and has always been, skinnable.

Link to comment
Share on other sites

[quote name='Matt' timestamp='1298491135']
I think whatever colour we went for we'd still polarize opinion. Color is a personal thing so it's hard to "please" everyone. Obviously all you have is a few screen shots to go on. Trust me, it looks great in the flesh. Striking and bold.


I'm sorry but I'm pleased with the current colours and I don't remember seeing a post criticizing them. Granted colours are personal thing but don't you agree that the choice of the ACP colours need to be professorial and neutral?

Link to comment
Share on other sites

Big and bold ... more pink I say ... MORE PINK!!!!! Mwwwhha ha ha ha ha :thumbsup:

Really boys and girls, you know you can change the colour, don't you? See. Simple isn't it. If you don't like it - change it to something you do like. It's not a big deal. Not in the grand scheme of things.

How about ... instead of focusing on a silly colour aesthetic ... we focus on some of the areas of the ACP where it is lacking, or where simple improvements could pay dividends?

• Member management?
• Forum management / permissions?
• Template system (simple form-based basic settings capability, with advanced [code based] template design like current template manager)?
• Ban / Spam tools?
• Other stuff I can't quite think of just now as I'm not able to get at my control panel ...


Cheers,
Shaun :D

Link to comment
Share on other sites

Love the idea of change and the new ACP features and all, so I'm definitely not trying to be negative here. I understand it's a lot of work, but I have to agree with the majority of the comments here that the hot pink/bright pink colors just don't look right. We can argue day in and day out about the correct colors for the ACP, but get nowhere. A solution, IMO, would be to give us the ability to change those colors to whatever colors we choose. Whether it be with the ACP's CSS or implementing some form of color palette onto the ACP to allow us to choose the colors we want. Just my two cents.

Link to comment
Share on other sites

[quote name='HellaWicked' timestamp='1298586160']
Love the idea of change and the new ACP features and all, so I'm definitely not trying to be negative here. I understand it's a lot of work, but I have to agree with the majority of the comments here that the hot pink/bright pink colors just don't look right. We can argue day in and day out about the correct colors for the ACP, but get nowhere. A solution, IMO, would be to give us the ability to change those colors to whatever colors we choose. Whether it be with the ACP's CSS or implementing some form of color palette onto the ACP to allow us to choose the colors we want. Just my two cents.


This is already possible by changing the ACP CSS - 3.2 won't be any different, so everyone who's moaning about the PINK - please, just understand that if you don't like the default colours the ACP comes with - YOU CAN CHANGE THEM ... lol :thumbsup:

What would be nice, however, is the suggested quick-colour-change option for the ACP - maybe a colour wheel, or a couple of colour option fields - that would make it dead easy for EVERYONE to customise the colours without having to delve into the CSS.

I wouldn't imagine it would be a massive amount of work considering everything that's going into 3.2?

What do you reckon Rikki? Doable?

Cheers,
Shaun :D

Link to comment
Share on other sites

[quote name='PWP' timestamp='1298469275']
[quote name='Charles' timestamp='1298468924']The "new" ACP is exactly the same as "old" ACP... we just made styling and usability improvements.

How hard is it to get accustomed to an ACP?

Link to comment
Share on other sites

[quote name='CycleChat' timestamp='1298587409']
This is already possible by changing the ACP CSS - 3.2 won't be any different, so everyone who's moaning about the PINK - please, just understand that if you don't like the default colours the ACP comes with - YOU CAN CHANGE THEM ... lol :thumbsup:

If this is true, then it shouldn't really matter what the default color will be. If we can just change it ourselves in the CSS, then problem solved. It's not like our members/guests will actually see the ACP's skin color or anything.

Great new changes/features for the ACP by the way. :thumbsup:

Link to comment
Share on other sites

[quote name='Rikki' timestamp='1298595883']
I can say with almost certainty that we are not building a color selector into the ACP. Sorry.


But could you tell us where to go to edit the CSS, yes? So we can edit the colours ourselves if we want to!!! :thumbsup:

Cheers,
Shaun :D

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...