jQuery UI Theming
All jQuery UI plugins allow developers to seamlessly integrate UI widgets into the appearance and feel of their websites or applications. Each plugin defines its styles through CSS, containing two layers of style information: the standard jQuery UI CSS Framework styles and specific plugin styles.
The jQuery UI CSS Framework provides semantic representation classes to indicate the role of elements within widgets, such as headers, content, or clickable areas. These are consistent across all widgets; a clickable tab, accordion, or button all share the same ui-state-default class to indicate they are clickable. When a user hovers over these elements, the class changes to ui-state-hover, and when selected, it becomes ui-state-active. This consistency ensures that elements with similar roles or interaction states appear uniform across all widgets.
The CSS framework styles are encapsulated in a single file named ui.theme.css. This file is modified through the ThemeRoller application. The framework styles only include properties that affect appearance and feel, such as colors, background images, and icons. These are "safe" styles that do not affect plugin functionality. This separation means developers can create a custom appearance and feel by modifying colors and images in the theme.css file. Future plugins or bug fixes will be usable without modification alongside the theme.
Since the framework styles only cover appearance and feel, specific plugin style sheets are also needed. These include all additional structural style rules that give widgets functionality, such as dimensions, padding, margins, positioning, and floats. Each plugin's style sheet is located in the themes/base folder and is named in conjunction with the plugin, such as "jquery.ui.accordion.css". These styles must be carefully edited as they provide overrides for the framework styles in conjunction with the scripts.
We encourage all developers to create jQuery plugins, as 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 ThemeRoller Theme: The earliest way to create a theme is by using ThemeRoller to generate and download a theme. This application creates a new
ui.theme.cssfile and animagesfolder containing all necessary background images and icon sprites. This method was the earliest way to create and maintain themes but was limited by the options provided in ThemeRoller.Modify CSS Files: For further control over appearance and feel, you can start from the default theme (Smoothness) or a ThemeRoller-generated theme, then adjust the
ui.theme.cssfile, or any individual plugin's style sheet. For example, you can easily adjust the corner radius for all buttons to be different from other UI components or change the path for icon sprites with custom settings. With a bit of styling scope, you can even use multiple themes within one UI. For easy maintenance, it is recommended to only change theui.theme.cssfile and images.Rewrite Custom CSS: For the most control over appearance and feel, you can start from scratch by rewriting the CSS for each plugin without using framework classes or specific plugin style sheets. This method is necessary if the desired appearance and feel cannot be achieved through CSS modifications or with highly custom markup. This approach requires deep CSS expertise and manual updates for future plugins.