Upgrading Your jQueryUI Custom Theme

I have always wondered what would happen if I created a custom theme for jQueryUI using the excellent ThemeRoller tool and then wanted to upgrade my version of jQueryUI. It always seemed like the odds were that the existing CSS and accompanying image files wouldn’t change too much (I’ve found that there’s far less disruption in an upgrade to jQueryUI than there is in an upgrade to jQuery itself), but at a certain point, there were bound to be changes that mattered enough to cause a problem.

I haven’t run into any of those problems, but as I’m carefully upgrading jQueryUI in a client installation, I don’t want to make any egregious mistakes. (The buck stops with me no matter how crappy a tool I’m using works.)

I decided to Bingle to see if there was a converter that some kind soul may have built out there somewhere. Lo and behold, it’s even easier than that. I found a nice little answer over on StackExchange that shows how. Thanks to StackExchange user fbuchinger for that. Gotta love the Internet.

If you open your custom CSS file and scroll down to the second main section, you’ll see something like this:

/*!
 * jQuery UI CSS Framework 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em[...SNIP...]cornerRadiusShadow=5px
 */

Assuming that you haven’t customized your theme manually since downloading it (probably a big assumption, actually) this link in the CSS file allows you to go right back to where you started in the ThemeRoller. Simply copy that link and paste it into a browser window and the ThemeRoller will load up your custom theme just as you created it.

My guess is that this would be a bit more tenuous depending on how many versions removed you are from the current one, but I’ve had no problems today. This is also helpful if you create a theme and realize a few days later that you missed that baby blue hover color that only shows up with one of the widgets or something.

[important]I just realized that the “To view and modify this theme” link may show up in different places in the CSS file depending upon your version. Do a search – it should be there somewhere.[/important]