jQuery UI Theme

All jQuery UI plugins allow developers to seamlessly integrate UI widgets into the look and feel of their websites or applications. Each plugin defines styles via CSS and contains two layers of style information: the standardjQuery UI CSS Frameworkstyles and the specific plugin styles.

The jQuery UI CSS framework provides semantically represented classes that indicate the role of elements within a widget, such as headers, content, or clickable areas. These are consistent across all widgets; a clickable tab, accordion, or button all share the sameui-state-defaultclass, used to indicate that they are clickable. When the user's mouse hovers over these elements, this class becomesui-state-hover, and when these elements are selected, it becomesui-state-active. The consistency of these classes ensures that elements with similar roles or interaction states across all widgets have a consistent appearance.

CSS framework styles are encapsulated in a separate file namedui.theme.css. This file is modified through theThemeRollerapplication. Framework styles only contain properties that affect appearance and feel, such as colors, background images, icons, etc. So these are "safe" styles that do not affect the plugin's functionality. This separation means developers can, by modifying thetheme.csscolors and images in the file to create a custom look and feel. Since future plugins or bug fixes will be available, these can be used with the theme without modification.

Since framework styles only cover appearance and feel, specific plugin stylesheets are also required. These stylesheets contain all the additional structural style rules that make widgets functional, such as dimensions, padding, margins, positioning, and floating. Each plugin's stylesheet is located in thethemes/basefolder and named after the plugin, such as "jquery.ui.accordion.css". These styles must be carefully edited because, together with the scripts, they provide overrides to the framework styles.

We encourage all developers to create jQuery plugins. The jQuery UI CSS framework makes it easier for end users to customize themes and use plugins.

Theming

Below are three general methods for theming jQuery UI plugins:

  • Download a ThemeRoller theme: The first way to create a theme is to useThemeRollerto generate and download a theme. This application will create a newui.theme.cssfile and aimagesfolder containing all the required background images and icon sprites. This method is the earliest way to create and maintain themes, but it limits customization to the options provided in ThemeRoller.
  • Modify the CSS file: For further control over the look and feel, you can choose to start from the default theme (Smoothness) or from a theme generated by ThemeRoller, and then adjust theui.theme.cssfile, or any of the individual plugin stylesheets. For example, you can easily set the corner radius of all buttons to a different value than other UI components, or change the path for the icon sprites using custom settings. With a little style scoping, you can even use multiple themes in one UI simultaneously. For ease of maintenance, it is recommended to only change theui.theme.cssfile and images.
  • Rewrite custom CSS: For maximum control over the look and feel, you can start from scratch and write the CSS for each plugin, without using framework classes or specific plugin stylesheets. If the desired look and feel cannot be achieved by modifying CSS, or if you use highly custom markup, then this method can be adopted. This method requires deep expertise in CSS and requires manual updates for future plugins.

Using ThemeRoller, the jQuery UI CSS Framework, and designing custom themes

Other Extensions