jQuery UI themes


All jQuery UI plugins allow developers to seamlessly integrate UI widgets into the look and feel of their website or application. Each plug-in defines styles through CSS and contains two layers of style information: standard jQuery UI CSS framework styles and specific plug-in styles.

The jQuery UI CSS framework provides classes for semantic representation that indicate the role of elements within a widget, such as title, content, or clickable area. These are consistent across all widgets. A clickable tab, accordion or button has the same ui-state-default class, using to indicate that they are clickable. When the user hovers the mouse over these elements, this class becomes ui-state-hover, and when these elements are selected, it becomes ui-state-active. The consistency of these classes makes elements with similar roles or interaction states appear consistent across all widgets.

CSS framework styles are encapsulated in a separate file named ui.theme.css. This file is modified through the ThemeRoller application. Frame styles only contain properties that affect the look and feel, as long as they are colors, background images, icons, etc. So these are "safe" styles and will not affect the functionality of the plugin. This separation means developers can create a custom look and feel by modifying colors and images in the theme.css file. As future plugins or bug fixes will be available, these will work with the theme without modification.

Since the frame style only covers the look and feel, specific plug-in style sheets need to be included. These style sheets include all additional structural style rules that make the widget functional, such as size, content, etc. Margins, margins, positioning, float. The style sheet of each plug-in is located in the themes/base folder and is named according to the plug-in, such as "jquery.ui.accordion.css". These styles must be edited carefully because they, along with the script, provide overrides of the frame styles.

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

Theming

Listed below are three general methods for theming jQuery UI plug-ins:

  • Download ThemeRoller theme : The earliest way to create a theme is to use ThemeRoller to generate and download a theme. This application will create a new ui.theme.css file and an images folder that contains all the necessary background images and icon sprites. This approach is the oldest way to create and maintain themes, but it limits customization to the options available in ThemeRoller.

  • Modify CSS files: For further control over the look and feel, you can choose to start with the default theme (Smoothness), or start with a theme generated by ThemeRoller , and then adjust the ui.theme.css file, or the style sheet of any independent plug-in. For example, you can easily adjust the corner radius of all buttons to a different value than other UI components, or change the path for an icon sprite using custom settings. With a little scope of styles, you can even use multiple themes simultaneously in one UI. For ease of maintenance, it is recommended to only change the ui.theme.css files 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 a specific plugin stylesheet. This approach can be used if the desired look and feel cannot be achieved by modifying CSS or using highly customized markup. This approach requires deep expertise in CSS and requires manual updating of future plugins.

Use ThemeRoller, the jQuery UI CSS framework, and design custom themes

  • jQuery UI ThemeRoller

  • jQuery UI CSS Framework API

  • Design Theme