New Admin Concept Design

Hi all,

I’ve spent a bit of time this weekend looking at a possible new design for the ContentBox admin interface.

So I’ve done a couple of options so far, one with the main navigation running across the top similar to how it is now and the second with it down the side. Initial thoughts on colour schemes were that the accent colour and background would be customizable via admin settings allowing the user to tailor it to match its website counterpart.

At this stage these are just my thoughts on what the ContentBox admin could look like and would really like to hear everyone else’s opinions, questions or suggestions.

Kind regards,

Richard McKenna

03 Search Results.jpg

Hi Richard McKenna

I think you did a great job, really impressive colour scheme.


Hi Richard–

Very nice job! I like how clean and minimal it is–looks like it would be easily implementable via Bootstrap.

Of the two navigation schemes, I definitely prefer the sidebar style.

RE: the admin options, one thing we discussed off list was doing a SASS implementation of the new admin theme. This would allow for not only simple changes like accent and main colors, but even more granular control if desired. Plus, with the SASS approach, documenting the theme would be really easy and help those who really want to go further with modifications…not to mention making ongoing maintenance and extension much easier and transparent.

Thanks for sharing these–they look really great IMO!

Sorry but I don’t like it, the colors make it to busy and become a distraction for the eyes.

Andrew Scott

He already said the colours are customisable

True he did, I had missed that. The other problem I have is that the menu navigation WILL need to be on the side for customization as there is not enough room at the top any more.


Andrew Scott

I definitely agree on the side-nav, Andrew. Having collapsible, groupable vertical nav will allow not only for growth in the core, but also (and especially) for custom extensions.

My vote for side-nav (collapsible, groupable vertical nav) as well. This way we can target nav-element to append custom links in.

Base theme for admin-console should be bootstrap which offers lot of features and even ability to override color scheme.

I really don’t have a color choice, but usually soft tones for anything that shouldn’t stand out.


Andrew Scott

I think these look great. Customizable colors and bootstrap it and I think we are on our way. Did you just do the mockups or did you actually code it?


Morning all,

These are just mockups at the moment. I didn’t want to spend hours coding it before getting feedback. So still easy to change.

I initially set out to re-skin the current interface, wanting something clean but adaptable. On showing Luis the concept he asked if I could do the vertical navigation, hence the last 2 images. I know colour schemes are a very subjective thing hence wanting to make them easily changeable. There are many reasons for me choosing the colours I did, mainly to help key elements stand out. Along with standard colours for constructive/destructive actions (green/red), keeping it to 2 main colours (accent and background) would make it simple to get a totally different look.

CSS preprocessor, definitely. I’m more of a LESS man myself, but either would be good. As bootstrap seems to be the front end framework of choice maybe LESS would be the most consistent choice.

I’m all for making ContentBox the “stand out” ColdFusion CMS and would like to help anyway I can.


Ok so I will add my comments today and maybe we can start building it out as a group. We can create a new branch in the repo for this.

So let’s go with less since we will use bootstrap.

Luis Majano
Ortus Solutions, Corp
Toll Free/Fax: 1-888-557-8057
Direct: 909-248-3408
Twitter: @lmajano, @ortussolutions

Brilliant Richard!!! Love the designs

Ok guys,

I created the new branch in the repo so we can collaborate as this grows.

I like the vertical nav, so let’s go with that approach. I would only like a way to collapse the navigation so it can give more space to the content. Also, what do you guys think of adding an Icon to each main menu? Should only the top level have icons, or should the top an sub levels?

Colors, let’s pick some but use LESS for the majority of variables so we can customize.


The first step would be to implement the skin using latest JQuery and Bootstrap as we will need to migrate all the current JQuery Tools Javascript and styles.

Richard how do you want to proceed, we are all here eager to help out.


Luis F. Majano
Ortus Solutions, Corp

ColdBox Platform:
Linked In:
IECFUG Manager:


RE: the icons, I think it would be good to have an icon for each top level menu item–that way, at some point, maybe we could have a collapsed “mini-menu” that’s only icons. I would say it would be good, though, to build in a capability for having submenu item icons, in case someone wanted to implement that in their custom section. For core, though, I think just top level is good.

As we get moving on this, please let me know how I can help out. I’m happy to help with HTML/CSS/LESS stuff, with the transition from jQuery Tools to jQuery/Bootstrap, etc, making icons, whatever. However I can be helpful, just let me know…really excited to see this happening!


Hi Guys,

I like the idea of the top level items each having icons. The more I look at it, I’m not convinced about the second level items. I think it’ll start turning into a bit of an “icon fest”. It looks a bit cleaner without them as well.

Onto bootstrap - bootstrap 3 seems to be on the cusp of being released, though they haven’t given an official release date yet. There are some major changes to the grid system, forms and icons which would be nice to take advantage of. Have a look there is a nice long list of changes here

Features like the icons which now use @font-face rather than pngs and the responsive stuff.

I think the first step would need to be building the overall layout and containers for the content and setting up styles/markup for common elements such as text, panels and menus etc. Of course we would need to make a decision on whether to build in bootstrap 3 before it’s actually released or not, due to the grid changes.

I’m happy to jump into all the initial stuff but would certainly appreciate help with JavaScript and re-factoring all the views. As I’m the new guy here I don’t want to step on any toes, so just put me in my place if I do :slight_smile:

Anyway I’ve attached a couple more menu mock-ups for your viewing pleasure.



I like the collapsed menu—will be very handy and looks awesome.

Count me at your disposal for all these things. Maybe those who want to be involved in this should have a short planning session soon to identify the action plan, responsibilities, etc.


Yeah that would be very helpful.


Count wig me :slight_smile:

Once we have a skeleton and can start I can run with it.

I say bootstrap 3, this way by the time we finish it might be released anyways.

I live the collapsible Nav for sure but yep maybe icons for the top level only.

Also would be good to account for badges for top level and sub nav.

We could then update the admin menu service to turn tabs and navs on, add badges and notifications.

This way modules can turn navs, add badges and have a notification system.

Where could we add notifications?
I say top right bar a message icon that can slide out notifications.

Notify( title, body )

Maybe use the flash scope for them with no auto purge or should they be persisted in the db?

Luis Majano
Ortus Solutions, Corp
Toll Free/Fax: 1-888-557-8057
Direct: 909-248-3408
Twitter: @lmajano, @ortussolutions

Badges are a nice idea. I think using the top right is good, which could also be used for other global stuff if needed. I think persisting them is better, since some notifications (for example, “You have an approval for xyz waiting…”) would be beneficial to live until explicitly dismissed. There should be a service that can allow you to easily register notifications from within modules.