Theming JQuery
Theming JQuery
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
widgets.
The CSS Framework styles are defined in a Css file called 'ui.theme.css' and
'ThemeRoller' application modify this file. This defines only the look and feel
and will not affect functionality. Due to this ,a developer can modify this CSS
file according to it's need.
The plugin-specific stylesheets or CSS contains the classes that defines the
functionality such as dimensions, padding, margins, positioning and floats.These
stylesheets are named to match the plugin such as "ui.accordion.css". These
styles must be carefully edited because they work in conjunction with the
scripting and provide overrides of framework styles as needed.
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.