ExpressionEngine 2.0 control panel theme 28Oct09

Inspired by recent exciting developments regarding the new version of ExpressionEngine, or in short EE 2.0, I decided to make the wait a little less tedious. I made an ExpressionEngine control panel theme which resembles the new look of the EE 2.0 control panel for, as I would like to call it, classic ExpressionEngine.

The development of EE 2.0 has been going on for over a year and people are very anxious to start using the new version. I am one of those people, and had an idea: Maybe it would be good to get people familiar with the new look, colors and design of the new control panel so the transition would go easy and quick. So I decided to help out the EE community in a way I know how, using css and images to make a control panel theme (I am not a plugin developer, just a front-end designer). Another reason to publish this theme is not all people will or can switch to the new version of ExpressionEngine right away. Simulating the classic ExpressionEngine control panel can give people at least some sense of an EE 2.0 feel until they are able to transition to the real thing.

How did you go about and recreate the new EE 2.0 feel if there isn’t even a public beta available?

Although members of the developer preview program were given access to a working version of EE named Kaylee, there have indeed not been any public releases other then developer screenshots or video’s of the control panel. Looking at what is available I started to dissect every pixel I could find of EE 2.0.

There were 3 places I used to render all the information from I needed in order to make a realistic theme. First there was the SXSW 2008 EE 2.0 sneak preview video by Derek Jones. This gives the most realistic view of what the backend is going to look like visually. The colors in this video are a bit over saturated due to video compression but at least I could tell where everything would be placed.

Second there was a nice blog post by Derek Allard presenting ExpressionEngine 2.0 “official” screenshots. Because the screenshots were made on a mac, these screenshots would provide me with precisely the colors I needed for most design elements.

Third, Leslie introduced us to Kaylee through a blog post on the EE official blog. This blog mostly was about SXSW 2009 but right down at the end was a little screenshot of the EE 2.0 CP in a totally different color scheme.

Using xScope, Photoshop, and Coda I started to work on stylesheet files and background images needed to simulate the 2.0 look. Requirements I set for myself were; the theme should come as close as possible to the real EE 2.0 CP theme, providing it can be used in the following browsers: Firefox 2 and 3 for mac and pc, Safari 3 and 4 for mac and pc, Internet Explorer 6, 7 and 8, Chrome and Opera. Unfortunately there is no way to exactly copy the whole EE 2.0 CP look and feel for classic EE and be compatible in most browsers. For instance the nice round corners in green you see in this screenshot can be done in Firefox, but Safari and Internet Explorer cannot handle such a look the way classic EE is setup. Rounded corners (like in EE2) are now available for browsers supporting CSS3, which does not include Internet Explorer unfortunately. I found it quite challenging at times to manipulate the tables, table backgrounds and tr or td backgrounds used in EE 1.6.7.

Despite the fact that EE is fully customizable at the backend through switching styles in the control panel, there are still a lot of inline styles and generic elements present in today’s EE install which prevent a total make-over. Other problems were selected control tabs (no round corners possible) and general placement of elements (tabs align left in EE 2.0). Working around the limitations and issues I think I simulated the look and feel of the new ExpressionEngine control panel nicely, I hope you agree.

Control Panel theme: FRUIT (green, orange)
Version: 1.1
Compatibility: ExpressionEngine 1.6.7+
License: FREE - (donation possible)

Control Panel theme: KAYLEE (grey, red)
Version: 1.1
Compatibility: ExpressionEngine 1.6.7+
License: FREE - (donation possible)

Should you experience any trouble, anomalies or irregularities using the themes please don’t hesitate to .(JavaScript must be enabled to view this email address) so I can improve the themes, thanks.

update …

I’ll be calling the ‘TWO’ theme ‘Fruit’ from now on since that is the official name and I’ll keep the other one named ‘Kaylee’ despite it being called ‘default’ in today’s B02 version. I also included some CSS3 in the files to achieve rounded corners and some other effects. Please enjoy ...

Version 1.1 (October 28, 2009)
- fixed a problem with displaying the user name in the ‘My Account’ section
- fixed some display issues with third party add-ons
- fixed some IE6 display issues on Publish pages
- changed colors to match the ExpressionEngine 2.0 Beta control panel themes
- added rounded corners through CSS 3 (not IE compatible)
- bug fixes

Version 1.0 (May 2, 2009)
- Initial release

Riding the Monkierail 26Mar09

We rode the Monkierail in RavotAapia at Ouwehands Dierenpark in Rhenen.

Decorate your house with christmas lights 22Dec08

Sinterklaas at Berit’s school 5Dec08

Sinterklaas and several Zwarte Pieten arrive via air balloon (which has wheels!) at the Albert Plesmanschool. All schoolgroups are waiting outside the school to welcome Sinterklaas. Berit is the one, 2 rows back, with the red zwarte piet hat.

Rommelpiet at Berit’s school 28Nov08

Chaos at Berit’s school today.

Rommelpieten trashed the classroom and hid all the shoes of the children, of course containing presents (Chocolate sinterklaas). They have to clean up the classroom in order to find their shoes. I stepped outside into the hallway to film this, as inside it resembled a busy ant farm.