Dion.nu Design - Dion’s Weblog

Weblog of Dion Kesling. Designer in Rotterdam, the Netherlands.
 

Dion's Weblog 3.0

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.

ExpressionEngine 2.0 control panel theme

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.

ExpressionEngine 2.0 control panel theme

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)

Download Control Panel theme: FRUIT


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

Download Control Panel theme: KAYLEE


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.

 

comments posted Comments off

1

Kyle A.  Phoenix  United States  wrote 9 years, 4 months ago…

Well done! Now I'm even more excited for EE 2.0 to come out. Do you have a PayPal addy we could donate to?
2

Dion  Rotterdam  Netherlands  wrote 9 years, 4 months ago…

Thanks Kyle, nice suggestion. I'll try to make a PayPal donate button asap. In the meantime you're free to use the contact address at the end of the post for donations.
3

.(JavaScript must be enabled to view this email address)  Chandigarh  India  wrote 9 years, 3 months ago…

Those were pretty much my exact thoughts. I wasn't actually at SxSW this year, but I followed what was going on with the EE 2.0 preview pretty closely. I too was overjoyed about the addition of jQuery to the package and am personally liking the fact/rumor that they are dropping the term 'weblog' from the system\s taxonomy. Now as long as we can get a 'real' pages module it'll be perfect.
4

.(JavaScript must be enabled to view this email address)  Canada  wrote 8 years, 10 months ago…

I was getting sick of the default theme so I'm really glad I stumbled upon this! It looks superb! Just makes me more excited for EE 2.0
5

thai silk  Thailand  wrote 8 years, 9 months ago…

Your work is fantastic looking, the site is a snap to navigate… Consider me a fan!
6

Term Papers  Pakistan  wrote 8 years, 8 months ago…

Its sounds interesting thanks for sharing..!
7

.(JavaScript must be enabled to view this email address)  France  wrote 8 years, 8 months ago…

Not to disparage your good work, but why would you want EE 1.6.x to look like 2.0? I'm looking forward to a 1.6.x theme for 2.0!
8

.(JavaScript must be enabled to view this email address)  India  wrote 8 years, 8 months ago…

Amazing stuff..Thanks a ton for putting this out.
9

Ben  Melbourne  Australia  wrote 8 years, 7 months ago…

Well done on the 2.0 theme for EE 1.6 - Dank u wel! Now that it's finally released, are you planning on putting together any cool themes for 2.0 at any stage Dion?
10

Ben  Melbourne  Australia  wrote 8 years, 7 months ago…

Hi Dion, are you interested in creating a control panel theme for EE2.0 for me? I am happy to pay for it. You are welcome to email me directly, however can you please make the subject 'Expression Engine 2.0 Theme 'as I get a lot of junk mail. Thanks in advance.
11

True Blood  Turkey  Turkey  wrote 8 years, 5 months ago…

Great article. I really like it. Thanks for information a lot.
Commenting is not available in this website entry.