A Massive Guide to Custom Theming jQuery UI Widgets: Premium Tutorial

jQuery UI is an open source library of interface components that features interactions, animation effects and ready-to-use widgets. jQuery UI is based on the jQuery JavaScript library and is themeable, which makes integrating jQuery UI easy for developers of any skill level to integrate into their web pages and applications.

Become a Premium member to read this tutorial as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network.

This tutorial covers how to theme jQuery UI widgets and write custom CSS so that you can make your own jQuery UI theme. Having a basic understanding of CSS and JavaScript will help you successfully complete this tutorial.

About This Tutorial

For this tutorial, I wanted to show how you can customize and theme jQuery UI widgets to match a specific design style.

For this tutorial, I wanted to show how you can customize and theme jQuery UI widgets to match a specific design style. The widgets in the source files demos have been themed to match the style of the Nettuts+ Freelance Jobs Board Graphic.

The tutorial source files zip also includes a few extra demos to show different options and settings for jQuery UI Accordion, Tabs, Datepicker and Slider widgets.

This tutorial includes a Table of Contents so that you can quickly find the sections you are interested in. The tutorial also features many of the available jQuery UI ready-to-use widgets such as Accordion, Tabs, Buttons, Dialog and Datepicker. Because the tutorial covers multiple jQuery UI widgets, it has been set up so that you can pick and choose which widgets you want to create a custom theme for.

Become a Premium member to read this tutorial/screencast, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network.