Using Multiple jQuery UI Themes on a Single Page
Posted by Scott on 02/18/2009
If you’re using the jQuery UI CSS Framework to design an entire interface, you may find that one theme is not enough. This quick tutorial will highlight a new feature in the jQuery UI Download Builder which allows you to easily use multiple themes on a single page.
We often get questions about how we’d recommend implementing multiple themes on a single page. The situation arises when you’re using the jQuery UI CSS Framework to style many elements in one interface and they begin to look too similar. In the past, you would have had to do some handy work with regular expressions to add CSS scope to all selectors in ui.theme.css, and rename your theme folder so it could sit in the same directory as another theme. Unfortunately, while this process was certainly doable for an experienced developer, it was a lot more complex than we think it should be for such a common task.
We decided to implement a solution in the download builder which automates the process of applying scope to a theme and renaming the theme folder. The new feature is available in the Themes section of the download builder, under advanced settings.
First Things First
In order to take advantage of theme scoping, you’ll first need to select a theme. You can choose from several themes from the gallery from within the download builder, or you can go to ThemeRoller and design a theme first. When you download your theme in ThemeRoller, you’ll be directed back to the download builder again to customize your download.
Entering a CSS Scope
The theme scope field is where you’ll enter a CSS selector representing
a portion of your page (or your site) that your theme should apply. For
example, if you have an accordion widget in the side navigation column
of your site and you want it to have a different theme than other areas
of your site, you can type the CSS selector that corresponds with that
side navigation column (such as
.interiorNavigation) and download your
theme. The builder will add a space after your scope selector as well,
so don’t worry about needing to add one.
…and a Folder Name
As you type your CSS scope, the builder will suggest a corresponding theme folder name. This name can be edited, and it won’t auto-suggest another one unless the folder field is empty or un-edited when you type in the scope field.
Once you download and unpack the zip file, you’ll see that it contains a theme folder named either “theme” or whatever custom name you entered in the Theme Folder field. Inside that folder you’ll find all of the files that make up the jQuery UI CSS Framework. Assuming you entered a scope in the Theme Scope field, all of the CSS included in this folder will be scoped to your selector.
A snapshot of the unzipped folder. Note that scoped theme downloads will not include an example page, due to the complexity of recreating your scoped markup.
To included this theme on your page, just direct a CSS link to ui.all.css in the “theme_internalNavigation” folder.
<link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" />
You’ve now included a theme that is scoped to a specific part of your site. You can do this as many times as you’d like - though you should be cautious of filesize as it will add up very quickly!
The following example demonstrates the result of the steps outlined in
this article. We’ve linked to both a regular unscoped theme and a second
theme scoped to the
.interiorNavigation selector (as demonstrated
above). The demo page features two tab widgets, the second of which is
contained in a div with a class of “interiorNavigation” allowing it to
receive the scoped theme styles.
By the way…
If you’re interested in designing with the new jQuery UI CSS Framework, we encourage you to check out our contest to win tickets to SXSW.
And be sure to check out these other articles concerning jQuery UI:
- Introducing the ThemeRoller Firefox Developer Bookmarklet
- Styling Buttons and Toolbars with the jQuery UI CSS Framework
- Achieving Rounded Corners in Internet Explorer for jQuery UI with DD_roundies
- Update: jQuery UI 1.6 Slider from a Select Element
- Date Range Picker using jQuery UI 1.6 and jQuery UI CSS Framework