Cover by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

15.1. Styling jQuery UI Widgets with ThemeRoller

Problem

jQuery UI widgets used in your website or application must match an established design.

Solution

Use ThemeRoller, a simple web application for editing the jQuery UI CSS Framework classes to customize the look and feel of the jQuery UI widgets.

Note

This recipe makes the following assumptions:

  • You have a basic knowledge of how CSS works and, specifically, how styles cascade, take precedence, and can be scoped using selector classes, ids, or elements. (For our recommended resources, please refer to the Appendix at the end of this chapter.)

  • You’re already familiar with jQuery UI CSS classes. (If not, just review Understanding the Components of jQuery UI CSS.)

Let’s walk through an example.

We’re working on a new website for booking travel reservations, and specifically, we’re building out the part of the interface for booking a flight. The design consists of a set of tabs for selecting the type of reservation (flight, car rental, or package deal), and the Book a Flight tab includes a form for entering the number of passengers, selects for the departure and arrival cities, calendars to set departure and return travel dates, and a submit button (see Figure 15-1).

Final target design for travel application

Figure 15-1. Final target design for travel application

For this recipe, we’ll use the jQuery UI widgets for the tabs and datepickers, and style them with a custom theme created in ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required