jQuery UI Themes Beginner’s Guide
Create new themes for your JQuery site with this step-by-step guide
ThemeRoller basics
Before we start using the ThemeRoller application to design and build our own themes, we’ll take a quick look at what makes it such a handy tool. There is a lot more to the ThemeRoller than simply changing themes—we also use it to build them. You can think of it as an IDE for jQuery UI themes.
Instant feedback
What makes the ThemeRoller application such a powerful development tool is the speed with which you get feedback to changes made in the theme design. Any change made in the ThemeRoller is instantaneously reflected in the sample widgets provided on the page. For instance, if I were to change a font setting, that change would be reflected immediately in the sample widgets provided on the same page. There is no need to update the application you’re building to see the results of small adjustments made to theme style settings.
The same is true of prepackaged themes in the ThemeRoller gallery. Selecting a theme will apply it to the same widgets – you get immediate feedback. This is very helpful in deciding on prepackaged themes. If you can see how it looks with jQuery UI widgets right away, that may dissuade you from using the theme or it may close the deal.
The idea behind this feedback mechanism offered by the ThemeRoller is a sped-up development cycle. Eliminating several steps when developing anything, themes included, is a welcome feature.
The dev tool
The ThemeRoller dev tool is a simple bookmarket for Firefox that brings the entire ThemeRoller application into any page with jQuery UI widgets. The benefit of the dev tool is that it allows you to see immediate theme changes in the context of the application you’re building. If you use the ThemeRoller application from the jQuery UI website, you can only see changes as they apply to the sample widgets provided. This can give you a better idea of what the theme changes will look like on a finished product.
There are some limitations to using the dev tool though. If you’re developing your application locally, not on a development server, you can’t use the dev tool due to security restrictions. The dev tool is better suited for viewing changes to themes, or viewing different themes entirely, on a deployed user interface. Having said that, if you’re designing a user interface with several collaborators, you might have a remote development server. In this scenario, the dev tool suits its name.
Portability
The ThemeRoller application is portable in more ways than one. The dev tool for Firefox allows us to use the application within any jQuery UI application. This means that we can design and tweak our jQuery UI themes as we build the widgets. This portability between applications means that we can build a single theme that works for a suite of applications, or a product line, if we’re so inclined.
We can also use the ThemeRoller application directly from the jQueryUI website. This is handy if we don’t have any widgets built or if you’re trying jQuery UI out for the first time and just want to browse the wide selection of prepackaged themes.
Whatever approach you take, the application is the same and will always be consistent, as it is a hosted application. You don’t need to concern yourself with installing an IDE for theme authors to collaborate with. The ThemeRoller application is available wherever they are.
ThemeRoller gallery
It is nice to have a wide variety of prepackaged themes to choose from. It isn’t all that helpful if you can’t see how they look. The ThemeRoller application has a gallery where we can not only browse prepackaged themes but also take them for a test drive. This section is about using the ThemeRoller gallery to view themes and get a feel of the variety available to us.
Viewing themes
The ThemeRoller application doesn’t hide anything about the prepackaged themes in the gallery. When we preview a theme, we get to see how it looks when applied to widgets. The theme gallery even gives us a thumbnail in the browser to show a bird’s eye view of the theme. So if you see a lot of black and you’re looking for something bright, you don’t need to bother selecting it to see how the widgets look with it.
Time for action – previewing a theme
It’s time for us to preview a jQuery UI theme before we actually download it. We can get an idea of what a theme in the ThemeRoller gallery will look like when applied to widgets:
- Point your web browser to http://jqueryui.com/themeroller/.
- Select the Gallery tab in the ThemeRoller section on the right-hand side.
- Move your mouse pointer over any theme in the gallery. A visual indicator will be displayed.
- Select the theme thumbnail:
What just happened?
We’ve just selected a theme to preview from the ThemeRoller gallery. You’ll notice that all the sample widgets to the right are instantly updated with the new theme. If we wanted to, we could change our theme selection and the sample widgets are once again updated with the theme changes.
You’ll notice that once you make a theme selection, the URL in your address bar is now long and ugly. These are the individual theme settings for the chosen theme being passed to the ThemeRoller page with the sample widgets. You’ll also notice that the theme selection on the left-hand side of the page isn’t preserved. This is because we’re passing individual theme settings and not the name of the theme itself, for example, instancetheme=darkness. We’ll see why this distinction is important in a little bit.
Downloading themes
Once you’ve selected a theme from the gallery and you’re happy with how it looks, it is time to download it and use it with your jQuery UI project. Downloading a theme is easy—each prepackaged theme has a download button that will take you to the jQuery UI download page. If we wanted to, we could download all themes in a single package to experiment with, locally. This would also eliminate the need for the ThemeRoller application, which you probably don’t want to do.
Time for action – downloading a theme
The gallery is a nice way to preview a theme, but now we want to use it in our application. To do this, we need to download it. This is similar to downloading the jQuery UI toolkit:
- Point your web browser to http://jqueryui.com/themeroller/.
- Select the Gallery tab in the ThemeRoller section on the left-hand side.
- Find a theme you wish to download. Click on the Download button underneath the theme thumbnail.
- This will bring you to the jQuery UI download page. Notice that your chosen theme is selected on the right-hand side of the page.
- Click on the Download button to download your theme:
What just happened?
We’ve just selected a prepackaged theme from the ThemeRoller gallery and downloaded it. In fact, you just downloaded jQuery UI again. The difference being, the downloaded ZIP archive contains the theme you selected from the gallery. The same principles apply for extracting the archive and using your theme with your jQuery UI application.
The downside is that if you’re downloading a theme, chances are you already have a jQuery UI application under development. In this case, downloading jQuery UI JavaScript files is redundant. However, there is no easy way around this. This is one of the drawbacks to having a useful tool available to us—a minor drawback at that.
If you’re only interested in the theme, you simply need to extract the theme folder from the ZIP archive and copy it to your jQuery UI application directory. You then need to update your path in your HTML in including the appropriate CSS file.
You’ll also notice that after clicking on the Download button from the theme gallery, you’re brought to the download page with an ugly URL. That is, you’ll see something like /download/?themeParams=%3FffDefault instead of just /download. This is a requirement of the ThemeRoller application that allows developers to edit existing themes or to roll their own. Without these parameters, we wouldn’t be able to download themes we have made changes to.
The jQuery UI download page also includes an Advanced Settings section that is hidden by default. This is because you rarely need to use it. It allows you to set the CSS scope for your theme, useful if you’re using multiple themes in a single user interface. This isn’t a recommended practice; the key idea behind jQuery UI themes is consistency. The advanced settings also lets you change the name of the downloaded theme folder. This can be useful if you plan on changing your theme later, but you can always rename the folder after downloading it.
