Theming JQuery

This page discusses - Theming JQuery

Theming JQuery

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.