Dion.nu Design - Dion's Weblog 3.0 - Weblog of Dion Kesling. Designer in Rotterdam, the Netherlands.

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

Dion's Weblog 3.0

Prelude to EECI 2010 EU 28Sep10

It’s been over a year since I last visited Leiden for the first ever ExpressionEngine conference and I am very much looking forward to attending again. Seeing al the familiar faces and friends again is having an invigorating effect on me. Of course attending a well organized conference coordinated by the gracious and friendly team of Whoooz! helps too!

Leslie Camacho and Leevi Graham

Hopefully we will have the same experience last year. Reminiscing about last year’s conference I remember the ‘Scheltema complex’ venue being a very intimate and cosy place to accommodate us Designers, Coders and Geeks!

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.


Click & support Dion’s Weblog

ExpressionEngine updates to 1.6 27Jun07

Just when you think EE couldn’t get any better, Ellislab releases ExpressionEngine 1.6. And during my vacation I might add, so I had some catching up to do, which is fine laugh.

Cool new features off course such as the Multiple Sites Manager and the integrated Pages module, you can read about those here.

The Multiple Sites Manager is a super addition to EE, can’t wait to use it on a new project. The Pages module I have to check out soon to implement it in this site. Using Mark’s version on a site recently has proven to be an excellent experience, although it is a little hard to understand it at first (this article helps). I hope the new module is as good as Mark’s, or is it the exact same module as Mark’s? I dunno…

There is still a bug in EE 1.6, which was also in 1.5.2. Paul fixed a security issue a couple of weeks ago but that update is not working well for me, I cannot upload pictures since. I get a message stating my uploaded file has invalid content for it’s MIME type. I fixed the problem in 1.5.2 by putting back the old core.upload.php file but now that we have 1.6 I want to resolve the issue.

Let’s see what the forums say about this problem…

ExpressionEngine Neutral Theme 1Jun07

Ever since I started tweaking the backend look of the ExpressionEngine system I am running to power this weblog, I wanted to build another Control Panel theme which was much more toned down and more neutral. Hence this weblog entry title. At the moment I am still building the theme but soon I will release an ExpressionEngine Control Panel theme called ‘Neutral’. It will have a look and feel like something you see here bellow. Lots of grey, black, white and a touch of neutral color here and there.

ExpressionEngine Neutral Theme

I have a feeling many ExpressionEngine users will use such a theme when they install ExpressionEngine for a client. The more the client can focus on using the system itself and the less distracted they get using an already complex (in their eyes probably) Content management system, the better.

Not that the default ExpressionEngine theme is to much of a distraction, on the contrary, it is a trade mark look or familiar look seeing the purple color scheme when you log into an ExpressionEngine system. But purple can be a too specific color scheme to people.

That is why I thought it to be a good idea to build an impartial, unbiased or unprejudiced (if you will) Control Panel theme. Not sure when I can complete it (vacation coming up), but when I do I will make it available here as free download so anyone working with ExpressionEngine can put it to use. Feel free to tell me if my thoughts are on the right track or that I am completely out of whack!

Custom ExpressionEngine Tomato Theme

At the moment I myself am running a tweaked CP theme, called Tomato (which is the theme of this weblog) see above. Maybe I can throw that on the web as a download too, don’t know yet. It would need a lot of cleaning up before making it available for public download because it was build only for personal use. We will see what happens yuck.

ExpressionEngine moves into adulthood 2Apr07

Ever since I started using ExpressionEngine I’ve been amazed of what it can do and how flexible it is. Many people with me feel the same, ExpressionEngine is more then just a weblog tool. It is a very flexible Content Management System. It was just a matter of time before someone would start using ExpressionEngine for a bigger project instead of building just a weblog with it.

I think a milestone was reached with the launch of the Nike Soccer website. Being not the biggest website in terms of content or information compared to, for instance, BMI.com, having a Nike site running ExpressionEngine is a whole other cup of tea. Of course BMI.com is a very large and complex website driven by ExpressionEngine, BMI does not have the magnitude of a household name like Nike.

Nike Soccer

The Nike Soccer website is home for Nike’s US soccer community and features a web ‘zine full of articles and tips, photo galleries, videos and cool downloads. All the content on the website, including the content passed to the interactive Flash article map, is managed using the ever flexible ExpressionEngine. I think the design of the website is very much ‘Nike’, which is usually very modern and edgy. The graphic design details are executed to precision and flash and html are seamlessly combined. Even difficult to handle EE sections like the gallery are integrated into the overall site design.

Design combined with ExpressionEngine (for example: Flash based article mapping populated from EE data using XML) the great looking site turns out very impressive. Maybe one might even see EE be used with some projects here at AD, you never know.

Switching from Blogger to EE 25Jan06

Yesterday I took some time to export my Blogger weblog entries to the new ExpressionEngine system. Turns out the export went smoother then I was expecting. A direct export from Blogger to EE is not possible, one must use a detour to get content from Blogger to EE.

There are 2 direct ways you can import stuff into EE; Movable Type content and pMachine content. I used the first way to get my content over to the new system. EE has a special page explaining how to get Blogger stuff exported to the Movable Type import format. Once exported it is a breeze to import all this into EE.

It takes so time to import all the month files one by one into EE and to delete some generated ‘minus’ symbols (——-) from those files (BBedit find and replace) but after that, everything is neatly ordered into your EE weblog. So everything you read here is now searchable in the new weblog. I only have to edit some entries to get rid of wrong characters and to categorize all entries and I am set with the weblog content. It is also a good way to test the css and html behaving well with live or actual content.

I guess importing Movable Type or pMachine content directly into EE is even more easy and more smoothly. So for everyone using those systems; go switch to ExpressionEngine, you’ll love it as much as I do…

Nieuwe versie van ExpressionEngine 15Jun05

Fantastisch, binnenkort een nieuwe versie van ExpressionEngine. De nieuwe 1.3 versie zal een volgende week waarschijnlijk uitkomen, I can’t wait. Kan ik gelijk de plannen die ik heb voor verschillende projecten (disneycruise, kiss podcast, dion.nu weblog, etc.) gaan realiseren.

pMachine heeft ook een nieuwe versie gemaakt van hun website (die draaide nog op het oude cms). Nu er nieuwe versies aankomen waar ook een forum geïntegreerd is in het cms hebben ze de stap genomen om een nieuwe corporate site te lanceren. Deze post is een goed voorbeeld waarom ik snel van blogger af moet, het schrijven van puntjes op de i bijvoorbeeld wordt niet automatisch omgezet naar xhtml code waardoor de browser een raar teken produceerd zoals dit Ä bv. EE doet dit on the fly.

Ook te vinden op de nieuwe homepage: We are proud to showcase the following websites, as premier examples of the capability of our web publishing software (waaronder de KISS Podcast). Leuk dat mijn site er tussen staat als EE voorbeeld.

Moblog Module 27Apr04

Expression engine heeft een ingebouwde Moblog Module. Je kan hiermee e-mails met bestanden versturen naar je weblog. Natuurlijk ook met een mobieltje die een camera heeft.

EE maakt je website lichter 7Apr04

ExpressionEngine blijft mij verbazen. Erg belangrijk voor een site die cms gebruikt (zeker als er veel bezoekers langskomen) is dat de database zo min mogelijk belast wordt.

ExpressionEngine doet dat door middel van caching. Alles wat de database uitpoept wordt opgeslagen als text file en is daarom aanzienlijk sneller opvraagbaar omdat de database aanvragen aanzienlijk minder zijn: The caching system will provide anywhere from a 30% to 90% reduction in the total number of queries.

Nieuw weblog 6Apr04

Ben eindelijk gestart met het voorbereiden van de nieuwe log. Heb het cms geïnstalleerd op een test adres. De installatie van Expression Engine gaat net zo makkelijk als pMachine (broertje, zeg maar) en eigenlijk is het nu een kwestie van looks aanpassen (oftewel de site in css maken), het cms leren kennen en de handel online zetten. Dit gaat lekker wat tijd kosten, maar dan heb je ook wat. Wat heb ik geleerd vandaag?

There may be times when you wish to give some of your users access to your ExpressionEngine Control Panel. ExpressionEngine provides a means for you to allow access to your Control Panel without revealing its location to your users. This provides you with increased security. Handig…