Change the CSS Theme

The great thing about CSS themes is that they allow you change the look of your page easily—just change the directory name to that of the theme you want to use. For example, let’s replace smoothness with ui-lightness.

For each base file in the uncompressed version of the page, simply replace the smoothness directory with ui-lightness (shown in bold here):

<link rel=stylesheet type=text/css
      href=jqueryui/development-bundle/themes/ui-lightness/jquery.ui.core.css />
<link rel=stylesheet type=text/css
      href=jqueryui/development-bundle/themes/ui-lightness/jquery.ui.theme.css />
<link rel=stylesheet type=text/css
      href=jqueryui/development-bundle/themes/ui-lightness/jquery.ui.tabs.css />

For the base file in the compressed version of the page, replace the smoothness directory with ui-lightness (shown in bold here):

<link rel=stylesheet type=text/css
      href=jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css />

The HTML page will now use the new theme (shown in Figure 1-6).

Our HTML page using the ui-lightness theme

Figure 1-6. Our HTML page using the ui-lightness theme

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.