Themes for Ext 2.0
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”.
Some nice looking themes there! I’ll have to try some of them out
Hi I want to create my own theme. but it’s really complicated maybe a tutorial or a guide will help. it this possible?
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?
@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.
@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.
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.
would you please release the psd files for the 2 official themes under some kind of gpl/cc licence?
@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.
@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
@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 )
some tutorial how to make themes will be good …