Themes for Ext 2.0
March 3, 2008 by ReyBango
A common question we get asked relates to themes and if the look-and-feel of Ext applications can be enhanced further than the stock themes included in the framework. The answer is a resounding “Yes!”. Ext themes are just CSS and images and anyone with a good understand of CSS and image editing software can be as creative as they’d like.
Community Contributions
Several Ext community members have gone through the steps to produce exceptional themes that greatly complement the Ext JS framework and allow developers to have a unique feel for their applications. Some great examples of community contributed themes include:
User madrabaz:
Black Theme [UPDATED 2008-02-15]]
User J.C.:
User DigitalSkyline:
User Condor:
Themed checkboxes and radio buttons
More Themes Available
So as you can see, Ext is quite extensible in terms of skinning and while not an exhaustive list, the screenshots above demonstrate the possibilities in terms of creating your own look-and-feel for your Ext applications. The Ext forums provide a wealth of information regarding skinning and if you’re interested in seeing more examples of cool themes, be sure to do a simple search for the keyword “theme”.
Posted on March 3rd, 2008 at 1:06 pm
Some nice looking themes there! I’ll have to try some of them out
Posted on March 4th, 2008 at 3:21 am
Hi I want to create my own theme. but it’s really complicated maybe a tutorial or a guide will help. it this possible?
Posted on March 4th, 2008 at 6:32 am
Would be nice to have a photoshop doc that was already setup with an example theme, along with all the slices pre-defined, so you could just tweak the colors n icons to your liking and “Save to Web” to create a new theme. Anything of the sort available? If not, how has everyone else been designing themes?
Posted on March 4th, 2008 at 10:08 am
@serkanyersen
There nothing unique about theming Ext JS. It is just vanilla CSS. There are certain CSS concepts you’ll need to know (e.g. specificity, shorthands, etc) but any CSS tutorial or book should be enough to help you get started.
@foltz
Trust me, we wish it was that easy. We use a lot of CSS sprites to optimize HTTP calls which makes that approach very difficult, if not impossible. I would imagine most poeple do it the old fashioned way, the same as we internally do it.
Posted on March 4th, 2008 at 12:31 pm
Can Ext JS Be Skinned? Of Course!…
[…]A common question we get asked relates to themes and if the look-and-feel of Ext applications can be enhanced further than the stock themes included in the framework. The answer is a resounding “Yes!”. Ext themes are just CSS and images and an…
Posted on March 5th, 2008 at 10:16 am
@Jack Slocum
What would prevent making a document with sprites predefined alongside any additional single-images pieces? Those would just be additional carefully constructed slices. I’m sure I’m missing something but I can’t think of any reason why it wouldn’t work at the moment … then again, I’m still on my first cup of coffee! We’re about to undertake a significant theming effort for our MODx CMS manager and this would be a huge help for us. Kuddos to you, the team and the community for such a great JS library.
Posted on March 6th, 2008 at 3:17 am
What’s not obvious and would be helpful is a guide indicating which css elements map to which parts of the interface. That’s really what I would look for in a theming guide for Ext 2.0.
Posted on March 6th, 2008 at 9:34 am
would you please release the psd files for the 2 official themes under some kind of gpl/cc licence?
Posted on March 6th, 2008 at 11:23 am
[…] Themes for Ext 2.0 […]
Posted on March 7th, 2008 at 11:54 pm
@Thomas
Internally we use Firebug for that. Just hit “Inspect”, point at an element and it will tell you in greater detail than we could ever provide the CSS that is styling it.
@ramaboo
No such files exist.
Posted on March 9th, 2008 at 4:17 pm
@Jack Slocum
Could you provide us with a sample page that uses ALL of the theme images at once? This way it would be so much easier to “Inspect” it and change both images and CSS to create new themes :o)
Posted on April 3rd, 2008 at 8:08 am
@ramaboo:
Nobody told you that ext themes are made with PhotoShop or that psd files exist.
I myself would love to create themes, but for sure i would use Inkscape ( SVG ) or Gimp ( XCF ) althought Inkscape is better for this work and make job easy for diferent colors for same theme ( just change the gradient )
Posted on April 4th, 2008 at 2:45 am
some tutorial how to make themes will be good …
Posted on April 7th, 2008 at 12:04 pm
[…] wishing to have a unique look-and-feel for their Ext applications. Back in early March, we also posted about the various community-driven themes and how Ext developers continue to extend the Ext UI with their own personal touch. More themes […]
Posted on May 1st, 2008 at 2:23 pm
Meri
People are as happy as they make up their minds to be.