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.

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.

Use the Table of Contents below to find the sections of the tutorial you are interested in reading.

Non members please note: table of contents links will not work unless you are signed in to a Tuts+ Premium member account.

Tutorial Information

1. About This Tutorial
2. Theming jQuery UI
3. About ThemeRoller
4. Theming jQuery UI – Best Practices
5. Links to jQuery / jQuery UI Website
6. Conclusion

Tutorial Steps

1. Step 1 – Create Basic Web Page (No Content)
2. Step 2 – Create External JS File (No Content)
3. Step 3 – Download jQuery and jQuery UI
4. Step 4 – CDN Hosted jQuery and jQuery UI
5. Step 5 – Reference jQuery and jQuery UI Libraries
6. Step 6 – Choose a jQuery UI Widget(s)
7. Step 7 – Remove Border on Slider Handle – Chrome & Safari
8. Step 8 – Upgrading to Newer Versions of jQuery UI

Widget Sections

1. jQuery UI – Tabs
2. jQuery UI – Accordion
3. jQuery UI – Button
4. jQuery UI – Datepicker
5. jQuery UI – Slider
6. jQuery UI – Progress Bar
7. jQuery UI – Dialog
8. jQuery UI – Highlight / Error

Custom Icons Sections

1. Replacing jQuery UI Default Icons with Custom Icons
2. Custom Icons – jQuery UI Button
3. Custom Icons – Datepicker
4. Custom Icons – Dialog Button
5. Custom Icons – Highlight / Error
6. Custom Icons – jQuery UI Accordion #1
7. Custom Icons – jQuery UI Accordion #2
8. Custom Icons – jQuery UI Accordion #3
9. Custom Icons – jQuery UI Accordion #4

Custom CSS Stylesheet Reference

1. Custom CSS Stylesheet Reference – Introduction
2. Custom CSS Stylesheet Reference – Component Containers
3. Custom CSS Stylesheet Reference – Interaction States
4. Custom CSS Stylesheet Reference – Interaction Cues
5. Custom CSS Stylesheet Reference – Default UI Icons
6. Custom CSS Stylesheet Reference – Specific jQuery UI Widgets
7. Custom CSS Stylesheet Reference – Custom Icons
8. Custom CSS Style Sheet Reference – Custom Icons – Accordion #1
9. Custom CSS Style Sheet Reference – Custom Icons – Accordion #2
10. Custom CSS Style Sheet Reference – Custom Icons – Accordion #3
11. Custom CSS Style Sheet Reference – Custom Icons – Accordion #4
12. Custom CSS Style Sheet Reference – Custom Icons – Buttons
13. Custom CSS Style Sheet Reference – Custom Icons – Datepicker
14. Custom CSS Style Sheet Reference – Custom Icons – Highlight / Error
15. Custom CSS Style Sheet Reference – Custom Icons – Dialog Button

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

...and that's the end of the preview!