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 animages
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 theui.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