What Is a CSS Theme?

What are the CSS themes we talked about earlier? To find out, just download a new customized version of jQuery UI, depending on the chosen theme. For that, go to http://jqueryui.com/download, which displays the page shown in Figure 1-3.

Choose the UI lightness theme from the list on the right, then retrieve the ZIP file for jQuery UI associated with this theme by clicking the Download button. This ZIP file contains the same directory, but the CSS files included in css directory are adapted to the new theme. To see the look of this theme, view the new index.html file included in the queryui directory (this file will have overwritten the previous one). An example of a theme is shown in Figure 1-4.

Each theme provides a unique combination of background colors, fonts, and other screen elements. If we look at the css directory, we see two subdirectories containing each of the themes that we have downloaded:

  • smoothness is the default theme downloaded with jQuery UI

  • ui-lightness is the theme we just downloaded from the http://jqueryui.com/download page.

Download of the jQuery UI with theme customization

Figure 1-3. Download of the jQuery UI with theme customization

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.