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.

ExtJS 3.0 CSS Theme Structure

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:

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:

Custom ExtJS 3.0 Theme

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.

If anyone out there attempts to create their own theme I’d love to hear your thoughts!

About 

With nearly 20 years of software engineering and operations experience, Arthur Kay offers an extraordinary set of leadership skills and technical expertise to develop meaningful products and high-performing teams. He has worked with Fortune 500 companies, VC-funded startups and companies across a wide variety of industries to build cutting-edge software solutions.

Arthur is a successful entrepreneur, technology professional, and mentor. He is a full-time family man, part-time consultant and spare-time musician. He graduated from Loyola University Chicago and currently lives in greater Chicago-land.

6 comments for “ExtJS 3.0 Themes

  1. Chris
    September 3, 2009 at 3:15 pm

    Thanks Arthur for sharing the ExtJs 3.0 theme information, particularly the links to non-default 3.0 themes. I am in the process of giving 3.0 a whirl and this definitely helps. Keep up the good work!

  2. September 10, 2009 at 8:23 am

    Thank you Arthur for the information and the collecting of the themes.
    The missing themes are the main reason for me for not upgrading my application to ExtJS 3.0.
    Hopefully more themes will come soon …

  3. February 8, 2010 at 10:39 am

    Hi Arthur,

    just stumbled upon your blog post through a comment on my 🙂 blog post: http://www.extjswithrails.com/2010/02/theming-extwindow-in-10-minutes.html

    Great to see another blog post of another theming experience!

    One thing I noticed is that I wouldn’t suggest to put your custom theme files within your Ext JS vendor folder in order to allow easier upgrading of your Ext JS version, which is usually done by just replacing the Ext JS folder.

    Cheers,
    Steffen

  4. February 8, 2010 at 11:21 am

    Steffen,

    Yes, that is a good idea. I’ve done that in my own applications but I failed to mention it here – so thanks for pointing it out!

    I’m going to take a read through your post. Thanks for sharing!

  5. Henk Flipman
    August 4, 2011 at 11:39 pm

    I love this theme. Any idea what needs to be done for ExtJS4 support?

    Thanks.

    Henk

    • Arthur Kay
      August 9, 2011 at 12:36 pm

      Unfortunately, ExtJS 4 has significant CSS changes. Even if you didn’t go down the path of generating a SASS template, you would have to do a lot to that theme to make it work.

      Wish I had better news for you…

Leave a Reply

Your email address will not be published. Required fields are marked *