JavaScript & jQuery: The Missing Manual, 3rd Edition

Chapter 11. Customizing the Look of jQuery UI

jQuery UI widgets share a unified appearance—the date picker looks similar to tabbed panels, which looks similar to a dialog box, which looks similar to a tooltip. If you pieced together a bunch of separate jQuery plug-ins by different authors to get these same widgets, you’d spend a lot of time messing around with CSS to get the different plug-ins to look related. The consistent presentation throughout the different jQuery UI widgets means you can build a web application with a unified look without spending countless hours handcrafting CSS.

However, what if you already have a look for your site and you want to make jQuery UI fit in with your existing design? For this situation, the jQuery UI team has put together lots of helpful advice as well as a cool online tool for even more assistance. This chapter covers how to override or modify existing jQuery UI styles and how to create new ones.

Introducing ThemeRoller

There are a lot of moving pieces in jQuery UI: creating all of the CSS to make each widget look great (and visually related) is a big task. Fortunately, the jQuery UI team put together an online tool called ThemeRoller. This tool lets you choose among 24 themes developed by designers for use with jQuery UI. It also provides tools to modify an existing theme, letting you pick fonts and colors that match the look of your site.

To use ThemeRoller, visit http://jqueryui.com/themeroller/ (Figure 11-1). You can look at the collection ...