ExtJS 3.0 Themes

One of the best improvements offered in ExtJS 3.0 over previous versions is the new CSS structure. JC Bize (an ExtJS Development Team member) had an excellent presentation at the 2009 Ext Conference discussing what had changed and offered some tips on how to build your own themes. I recently migrated my application from 2.x to 3.0, and I’d like to share my experience with creating a new theme.

In 3.0, the CSS data is divided into two logical groups: structural and visual. This makes creating custom themes much easier than it had been in 2.x, as the developer (in most cases) isn’t interested in changing structural CSS definitions. By isolating the visual CSS, developers can play with colors, fonts, and other presentational elements without worrying about breaking their application.

The only problem with the improvement is that it left many of the cool 2.x templates behind. New CSS rules prevent some things from rendering correctly – though which “things” depends entirely on which template you might have been using.

Searching the ExtJS message boards, you’ll notice a handful of 3.0 templates – but not an overwhelming number. To save you some time, I compiled a small list:

• Blueen
• Gray
• TargetProcess
• Slate

Of course, the standard “blue” theme comes with 3.0 as a default.

I had been using the Slickness Theme for my application, and I was dreading the thought of having to give it up as I migrated to 3.0. Much to my surprise, the Slickness theme (built for 2.x) works almost perfectly in 3.0! I had to make a few minor CSS adjustments (available here), but here’s what my customized Slickness theme looks like:

If you’d like to try out my customized Slickness theme, simply include the “xtheme-slickness.css” file (as you would for any theme), but also include my “xtheme-symphony.css” file AFTER the Slickness CSS file. This way, my CSS styles override the necessary parts of the Slickness theme.

I also attempted to create my own custom theme for ExtJS 3.0 – though I’ll admit it didn’t look nearly as good as the Slickness theme. I basically fake my way through Photoshop, so editing the CSS sprites was a pain in the ass for me. All things considered though, I had a fully customized theme in under 4 hours of work. If you’ve never worked with CSS, 4 hours for a fully customized theme is pretty quick. In 2.x, it probably would have taken days.

Anyone want to tackle creating their own theme for ExtJS 3.0? Here’s the basics:

1. Open your ExtJS 3.0 folder, and go to /resources/css/
2. Make a copy of “xtheme-blue.css” and name it whatever you’d like. (e.g. “xtheme-mytheme.css”)
3. Go to the /resources/images/ folder.
4. Make a copy of the “/default/” folder and name it whatever you’d like. (e.g. “/mytheme/”)
5. Open your new CSS file.
6. Find/Replace all references to “../images/default/” with the path to your new images folder. (e.g. “../images/mytheme/”)
7. Include your new CSS file in the header of your webpage.

At this point, you have a new theme… albeit an exact copy of the standard “blue” theme. Now it’s just a matter of changing colors in your CSS file and Photoshop-ing the images in your new “/mytheme/” folder.

Granted, I’m making this sound easier than it actually is. Photoshop-ing the CSS sprites and background images is still a tedious process – and if you’re not a Photoshop wizard, it can be pretty frustrating. That being said, I’ll leave the rest of the details as an exercise for the reader. . . besides, the whole point of making a custom theme is to do whatever you want with it. My input beyond this step is really irrelevant.