YouTip

# jQuery UI Themes All jQuery UI plugins allow developers to seamlessly integrate UI widgets into the look and feel of their websites or applications. Each plugin defines its styles through CSS and includes two layers of style information: the standard (#) styles and the specific plugin styles. The jQuery UI CSS Framework provides semantic 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 same `ui-state-default` class, indicating 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 consistent across all widgets. The framework styles are encapsulated in a single file named `ui.theme.css`. This file is modified using the (#) application. The framework styles only contain properties that affect the look and feel, such as colors, background images, and icons. Therefore, these are "safe" styles that do not affect the functionality of the plugins. This separation means developers can create a custom look and feel by modifying colors and images in the `theme.css` file. Future plugins or bug fixes will be available and will work with the theme without modification. Since the framework styles only cover the look and feel, specific plugin stylesheets are also included. These stylesheets contain all the additional structural style rules that give widgets their functionality, such as dimensions, padding, margins, positioning, and floats. Each plugin's stylesheet is located in the `themes/base` folder and is named to match the plugin, for example, "jquery.ui.accordion.css". These styles must be edited carefully, as they provide overrides to the framework styles along with the scripts. We encourage all developers to create jQuery plugins, and the jQuery UI CSS Framework makes it easier for end-users to customize themes and use plugins. ### Theming Below are three general approaches to theming jQuery UI plugins: * **Download a ThemeRoller Theme**: The earliest way to create a theme is to use (#) to generate and download a theme. This application will create a new `ui.theme.css` file and an `images` folder containing all the necessary background images and icon sprites. This method is the original way to create and maintain themes, but it limits customization to the options provided in ThemeRoller. * **Modify the CSS Files**: For more control over the look and feel, you can choose to start with the default theme (Smoothness) or a theme generated by ThemeRoller, and then adjust the `ui.theme.css` file or any individual plugin's stylesheet. For example, you can easily adjust the corner radius for all buttons to a value different from other UI components, or use custom settings to change the path for the icon sprites. With a little bit of style scope, you can even use multiple themes within a single UI. For ease of maintenance, it is recommended to only change the `ui.theme.css` file 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 the framework classes or specific plugin stylesheets. This approach is useful if the desired look and feel cannot be achieved by modifying the CSS or if you are using highly customized markup. 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