jQuery UI Themes: Using the ThemeRoller

Exclusive offer: get 50% off this eBook here
jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide — Save 50%

Create new themes for your JQuery site with this step-by-step guide

$23.99    $12.00
by Adam Boduch | August 2011 | Open Source

This article by Adam Boduch, author of jQuery UI Themes Beginner's Guide, is all about the ThemeRoller application. This is an indispensable tool for customizing user interfaces. In this article, we shall:

  • Get familiar with ThemeRoller
  • Browse the theme gallery
  • Explore theme settings
  • Edit existing themes
  • Download a theme

So let's get rolling.

 

jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide

Create new themes for your JQuery site with this step-by-step guide

        Read more about this book      

(For more resources on jQuery, see here.)

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:

    jQuery UI Themes: Using the ThemeRoller

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:

  1. Point your web browser to http://jqueryui.com/themeroller/.
  2. Select the Gallery tab in the ThemeRoller section on the left-hand side.
  3. Find a theme you wish to download. Click on the Download button underneath the theme thumbnail.
  4. 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.
  5. Click on the Download button to download your theme:

    jQuery UI Themes: Using the ThemeRoller

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.

jQuery UI Themes Beginner's Guide Create new themes for your JQuery site with this step-by-step guide
Published: July 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
Read more about this book
(For more resources on jQuery, see here.)

Themes from scratch

So far, we've only been working with prepackaged themes. It is time to see how we can build our own themes from scratch. Every aspect of a theme can be adjusted from within the ThemeRoller; you don't have to write a single line of CSS to create your own theme. Because of the immediate feedback provided by the ThemeRoller, we don't need intimate knowledge of the inner workings of CSS to design the look and feel of a jQuery UI application.
When we start designing a theme from scratch, there is no starting point. That is, the ThemeRoller will fill in some initial values we'll most certainly want to change. The initial values are simply there so that the sample widgets have a theme applied to them when the page is loaded. Now we'll walk through these settings and watch the sample widgets change as we go.

Fonts

The fonts section of the ThemeRoller sets the font style properties for our theme. These settings apply to all widgets in which our theme is applied. It is thus important to select font settings that work well with other theme settings. Although this is the first group of theme settings we're changing, there is a good chance we'll be coming back to change them again to better reflect the changes we've made elsewhere in the theme. For instance, we may make some border thickness changes that make our chosen font settings tawdry by comparison. Another way to look at starting a new theme from scratch is to choose a font you're pleased with and use the font settings as the standard for all other theme settings.

Time for action - setting theme fonts

All fonts we see in a jQuery UI application are set in the theme style properties. Some themes share the same font settings while others are noticeably different from one another. We can define all these properties in the ThemeRoller application:
  1. Point your web browser to http://jqueryui.com/themeroller/.
  2. In the ThemeRoller section on the left-hand side of the page, expand the Font Settings section.
  3. In the Family field, enter Lucida Grande, Lucida Sans, Arial, Sans-serif.
  4. In the Weight field, select bold.
  5. Leave the Size field as 1.1em:
    jQuery UI Themes: Using the ThemeRoller

What just happened?

We've just taken our first steps toward creating our first custom theme using the ThemeRoller. We've set the Family property to use Lucida Grande as our first choice for the type of font to use in the theme. We've also changed the font weight to bold. We're happy with the default font size so we decided not to change it.
After making these changes, we're able to see the sample widgets on the right-hand side of the page are updated to reflect the new theme styles. Here is what the sample accordion widget looked like before the changes were made:
jQuery UI Themes: Using the ThemeRoller
Here is the same sample widget after we made our theme font setting changes:
jQuery UI Themes: Using the ThemeRoller
We can see the style of both the tab headers as well as the tab content has changed. The most noticeable change, however, was the font weight setting. The tab headers are now bold but the tab content isn't. The CSS framework makes a distinction in where it applies the font weight style. If the setting made all fonts bold, it would be very difficult to distinguish between header text and content text.

Corners

Almost every jQuery UI widget has corners and is thus affected by the theme corner settings. There is actually only one setting in the corners section - the corner radius. This determines the roundness of widget corners. Rounded corners look much better than straight lines. With this setting, we can give our theme slightly rounded corners or very rounded ones.
This setting relies on the CSS3 border-radius style property. This is supported by all major web browsers, except Internet Explorer 8 or earlier.

Time for action - changing the corner radius

You've probably noticed that all the sample widgets in the ThemeRoller application have rounded corners. This is a nice visual enhancement; most desktop environments have widgets with rounded corners. Straight corners can get boring after a while.
Something we can define in jQuery UI themes is the roundness of widget corners. That is, we can change the corner radius:
  1. Continuing with our theme design, expand the Corner Radius section.
  2. Change the value of the Corners field to 8px:
    jQuery UI Themes: Using the ThemeRoller

What just happened?

We've used the ThemeRoller to increase the roundness of our widget corners. The change may seem rather drastic - we've doubled the corner radius setting from 4px to 8px. The change, however, isn't overly sensational. Here is what the sample accordion widget looked like before the change was made:
jQuery UI Themes: Using the ThemeRoller
Here is what the sample accordion widget looks like after the change:
jQuery UI Themes: Using the ThemeRoller
We can see that the corners of both the accordion header sections and the accordion content sections appear to be rounder.
In the Corners section of the ThemeRoller, there is a note explaining that corner roundness in jQuery UI themes is achieved by using the CSS3 border-radius style property. The only reason this is there is because this is a relatively new property that isn't supported by all browsers. IE still holds a large majority of the browser market share. Version 9 supports rounded corners but older IE versions do not. If you're targeting a specific browser with your jQuery UI application, check if this property is supported before investing too much time in designing beautifully rounded corners in your theme.

Headers

Just as a web page has a header, so do some jQuery UI widgets. The ThemeRoller allows us to set style properties for widget headers in our theme. Headers are meant to grab the attention of the user, just like headers in a web page. For instance, if I'm using a tabs widget, I'd want the names of each tab to stand out more than the content within the selected tab. In this section, we'll take a look at defining header theme settings.

Time for action - setting theme headers

It's time to give our theme some widget header styles. The ThemeRoller allows us to control the style properties for widget headers:
  1. Continuing with our theme design, expand the Header/Toolbar section.
  2. In the Background color & texture section, click on the small, colored square in the middle. This will open a texture selector.
  3. Select the hard inset texture.
  4. In the Background color & texture section, change the opacity from 75% to 65%.
  5. In the Border setting, change the color value to #828282:
    jQuery UI Themes: Using the ThemeRoller

What just happened?

We've just set the widget header styles for our custom theme. The section is called Header/Toolbar because in some widgets, the distinction between header and toolbar is equivocal at best.
First, we updated the background color and texture settings. Actually, in our case, we've chosen to leave the background color as the default. There is nothing wrong with using default theme settings if that is what you want. We'll see that this is especially true when it comes to editing prepackaged themes later on. We did, however, change the background texture and opacity. We changed the texture to hard inset, which makes the header/ toolbar background a fade toward the bottom. Any background texture is simply an image that overlays the header background color. We lowered the background opacity by 10%, or, increased the transparency by 10%. This simply changes the opacity of the background texture image.
Finally, we changed the header border color to something a little darker. Again, we decided to leave the text and the icon color settings alone. These will simply change the color of the header text and the header icon color respectfully.
Here is what the sample tabs widget looked like before we changed the header theme settings:
jQuery UI Themes: Using the ThemeRoller
Here is what the sample tabs widget looks like after the header theme settings were changed:
jQuery UI Themes: Using the ThemeRoller
Here we can see that the border color of the header containing each individual tab is now slightly darker than the border of the tab widget. We can also see that the texture of the tabs header has been updated—it now fades toward the bottom.

Content

Content theme settings are the counterpart to header settings. Widgets that have a header usually have content as well. Remember, a header is used to convey what content follows. Header and content theme settings should be complimentary to a large degree. This is easy to do with the ThemeRoller as the settings in the two sections are identical.

Time for action - setting widget content styles

Now that we have header styles for our custom theme, it is time to define some widget content styles. We can use the ThemeRoller to set the content theme style properties. These are identical to the header settings:
  1. Continuing with our theme design, expand the Content section.
  2. In the Background color & texture section, select the background color selector to the left. Set the color to #f5f5f4.
  3. In the Background color & texture section, select the background texture selector in the middle. Select the highlight soft texture.
  4. In the Border setting, change the color value to #828282:
    jQuery UI Themes: Using the ThemeRoller

What just happened?

We've just set the content style settings for our theme. We changed the background color to something slightly darker than the default. We changed the widget content background texture to highlight soft. This changes the background so that it fades slightly at the top. The background looks good like this so we've left the content background opacity at 75%.
The content border color has been updated to something darker than the default. In fact, we've set the border color to be the same as the border color defined in the header section of the ThemeRoller. This way they complement one another. Also complementary to the header theme settings, are the content text and icon colors. We've left them as the default values.
Here is what the sample datepicker widget looked like before we changed the content theme settings:
jQuery UI Themes: Using the ThemeRoller
Here is what the sample datepicker widget looks like after we update the content theme settings:
jQuery UI Themes: Using the ThemeRoller
The outer border of the datepicker widget now matches that of the datepicker header. We can also notice the difference the background theme settings made.

Summary

We've learned a lot about the ThemeRoller application in this article. Theme authors can use this tool for just about any jQuery UI application. This is due mostly to the flexibility in the CSS framework itself. It is also largely due to the portability of ThemeRoller. We can access it from anywhere - it is a hosted application. We can use ThemeRoller from the jQuery UI website or we can use the dev tool - a compact version of ThemeRoller that allows us to develop themes using our own widgets.

In the next article we will take a look at types of state styles, cues and their types, overlays and shadows.



jQuery UI Themes Beginner's Guide Create new themes for your JQuery site with this step-by-step guide
Published: July 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Adam Boduch

Adam Boduch has spent the last several years developing user interfaces for large-scale software systems. Starting out as a backend Python developer, he was lured to the frontend by tools like jQuery UI. Adam is passionate about readable code, and writes extensively about jQuery UI widgets, including his previous book jQuery UI Themes Beginner's Guide, Packt Publishing.

When Adam isn't coding, reading or writing, you will usually find him playing hockey, or spending time with his family.

Books From Packt


jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

jQuery Mobile First Look
jQuery Mobile First Look

Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

PHP jQuery Cookbook
PHP jQuery Cookbook

ASP.NET jQuery Cookbook
ASP.NET jQuery Cookbook

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software