The jQuery widgets are designed to allow you to add it according to your website's color and feel. With the help of CSS, each plugin is designed and it has two style layers ,that is, standard jQuery UI CSS Framework styles and plugin-specific styles.
The jQuery UI CSS Framework points the role an element's role such as a
header, content area, or clickable region.These are applied consistently across
all widgets so a clickable tab, accordian or button will all have the same "ui-state-default"
class applied to indicate that it is clickable. When a user mouses over one of
these elements, this class is changed to ui-state-hover, then ui-state-active
when selected. This level of class consistency makes it easy to ensure that all
elements with a similar role or interaction state will look the same across all
Approaches to theming jQuery UI plugins:
Write completely custom CSS:
For fully designed application according to your need , you can write complete CSS . This may be necessary if the desired look and feel can't be achieved by modifying the CSS or if highly customized markup is used.
Modify jQuery UI Framework Style Sheet :
You can also modify the theme by editing jQuery UI Framework Style Sheet according to your need . To keep maintenance simple, restricting changes to just the 'ui.theme.css' file and images is recommended.
Download a ThemeRoller theme:
The ThemeRoller provides capability to build a theme using it's provided options. This appliction will bulit a new 'ui.theme.css' style sheet and images directory which contains the images and icons provided by you. But it's limitation is that it can't modify other than provided options
Learn from experts! Attend jQuery Training classes.