A Massive Guide to Custom Theming jQuery UI Widgets

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 Steps

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

Widget Sections

jQuery UI - Tabs
jQuery UI - Accordion
jQuery UI - Button
jQuery UI - Datepicker
jQuery UI - Slider
jQuery UI - Progress Bar
jQuery UI - Dialog
jQuery UI - Highlight / Error

Custom Icons Sections

Replacing jQuery UI Default Icons with Custom Icons
Custom Icons - jQuery UI Button
Custom Icons - Datepicker
Custom Icons - Dialog Button
Custom Icons - Highlight / Error
Custom Icons - jQuery UI Accordion #1
Custom Icons - jQuery UI Accordion #2
Custom Icons - jQuery UI Accordion #3
Custom Icons - jQuery UI Accordion #4

Custom CSS Stylesheet Reference

Custom CSS Stylesheet Reference - Introduction
Custom CSS Stylesheet Reference - Component Containers
Custom CSS Stylesheet Reference - Interaction States
Custom CSS Stylesheet Reference - Interaction Cues
Custom CSS Stylesheet Reference - Default UI Icons
Custom CSS Stylesheet Reference - Specific jQuery UI Widgets
Custom CSS Stylesheet Reference - Custom Icons
Custom CSS Style Sheet Reference - Custom Icons - Accordion #1
Custom CSS Style Sheet Reference - Custom Icons - Accordion #2
Custom CSS Style Sheet Reference - Custom Icons - Accordion #3
Custom CSS Style Sheet Reference - Custom Icons - Accordion #4
Custom CSS Style Sheet Reference - Custom Icons - Buttons
Custom CSS Style Sheet Reference - Custom Icons - Datepicker
Custom CSS Style Sheet Reference - Custom Icons - Highlight / Error
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.

Theming jQuery UI

There are several ways that you can go about theming jQuery UI widgets and plugins:

You can build and download a theme using jQuery UI ThemeRoller
You can download one of the default ThemeRoller themes and modify the CSS
You can create your own theme from scratch by writing completely custom CSS

Although it is possible to create a jQuery UI theme by writing completely custom CSS, I've found that it is easier and faster to start out with a default ThemeRoller theme that is close to the desired look and feel and then modify the CSS to suit your needs. By heavily modifying the CSS of a default ThemeRoller theme, you can create a custom theme without having to start out completely from scratch.

I've found that it is easier and faster to modify the CSS style sheet of a default ThemeRoller theme, than writing a custom CSS theme from scratch.

About ThemeRoller

ThemeRoller is a web application designed and developed for jQuery UI by Filament Group, Inc. The Themeroller application interface is divided into sections such as header/toolbar, content, clickable states, etc which allows you to design basic, custom CSS themes for jQuery UI widgets and plugins.

There is also a Theme Gallery with pre-rolled themes if you do not want to design your own custom jQuery UI theme. You can find more information about the jQuery UI ThemeRoller Web Application Here.

Theming jQuery UI - Best Practices

When it comes to theming jQuery UI, the jQuery UI website lists a few "best practices" to follow which includes:

All classes should begin with the .ui- namespace
All styles should be specific to the .ui- namespace
Do not create global styles
Do not use the ID attribute for styling
Separate words using hyphens, not underscores
Always use lower case

Step 1 - Create Basic Web Page (No Content)

This tutorial is set up so that you can choose your own content for the web page.

The HTML

Create an .html file that includes the following code:

 
<!doctype html> 
<html> 
<head> 
 
<meta charset="utf-8"> 
 
<!-- CSS stylesheets --> 
<link href="css/style.css" rel="stylesheet" media="screen" /> 
 
<!-- jQuery / JavaScript --> 
<script src="js/jquery-functions.js"></script> 
 
<meta name="description" content="This demo shows how jQuery UI Controls look with a basic, custom CSS theme applied." /> 
<meta name="keywords" content="jquery,jquery ui,themeroller,widget,demo,tutorial" /> 
<title>jQuery UI Custom Theme Demo - Custom CSS Theme</title> 
 
</head> 
<body> 
 
	<!-- Begin Wrapper --> 
	<div id="wrapper"> 
 
	<p> 
	Content will go here 
	</p> 
 
	</div> 
	<!-- End Wrapper --> 
 
</body> 
</html>

The CSS

Create a CSS stylesheet called "style.css" and add it to a new folder named "css". Include the following code:

 
/*  Default Styles 
--------------------------------------------------- */ 
 
body { 
	margin: 0px; 
	padding: 0px; 
	background-color: #f2f2f2; 
	font-size: 18px;  
	font-family: Arial, Helvetica, sans-serif; 
	color: #000; 
	text-align: left; 
} 
 
#wrapper	{ 
	width: 965px; 
	margin: 0 auto;	 
} 
 
 
a:link, a:visited, a:active { 
	color: #009999; 
} 
 
a:hover { 
	color: #000; 
} 
 
.clear	{ 
	float: none; 
	clear: both; 
}

Step 2 - Create External JS File (No Content)

An external JavaScript file "jquery-functions.js" needs to be created and added to a folder named "js". This JavaScript file will contain the jQuery code needed to initialize the various jQuery UI widgets. This tutorial is set up so that you can pick and choose which jQuery UI Widgets you want to include in your web page. jQuery code(s) will be added to this file based on the jQuery UI widgets you have selected.

Step 3 - Download jQuery and jQuery UI

Download the latest version of jQuery and copy/upload the file to your JS folder. Then Download the latest version of jQuery UI and copy/upload the jquery-ui .js file to your JS folder. Make sure that the ThemeRoller default theme "UI darkness" has been selected.

For this tutorial, the ThemeRoller default theme "UI darkness" is being used. However, when creating your own custom jQuery UI CSS theme, go to the jQuery Themeroller Gallery and choose a theme that has a look and feel that best matches your web design.

Step 4 - CDN Hosted jQuery and jQuery UI

For this tutorial, jQuery and jQuery UI are being self-hosted on an independent server rather than using a CDN (Content Distribution Network).

If you would rather have jQuery and jQuery UI hosted by a CDN, here are a few places where you can find CDN-hosted copies of jQuery and/or jQuery UI that you can link to:

Step 5 - Reference jQuery and jQuery UI Libraries

We need to make sure that the web page references the jQuery and jQuery UI libraries.

Between the head tags of the web page, just below add the following code:

 
<link href="css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" media="screen" /> 
 
<!-- jQuery / JavaScript --> 
<script src="js/jquery-1.6.4.min.js"></script> 
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>

Step 6 - Choose a jQuery UI Widget(s)

Now that you have completed steps one through five, you can start adding jQuery Widgets to your web page. The tutorial covers how to theme these jQuery UI widgets:

Tabs
Accordion
Button
Datepicker
Slider
Progress Bar
UI Dialog
Highlight / Error

Although Highlight / Error are not widgets, they have been included in the tutorial to show how to theme these elements and replace the default UI icons with custom icons.

Step 7 - Remove Border on Slider Handle - Chrome & Safari

When cross browser testing the demos for this tutorial, a border was being displayed when the slider handle was clicked in both Google Chrome and Safari web browsers. Google Chrome displayed a yellow border and Safari displayed a light blue border.

To remove this border, the CSS code "outline: none;" was added to the jQuery UI CSS stylesheet. In the "jquery-ui-1.8.16.custom.css" file find the following line of code:

 
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }

Change this line of code so that it includes "outline: none;" like this:

 
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; outline: none; }

Your theme may have a slightly different line of code for the slider handle. Find the line that contains ".ui-slider .ui-slider-handle { position: absolute; ......" and add "outline: none;" to the end of that line of code.

Step 8 - Upgrading to Newer Versions of jQuery UI

If you have heavily modified the CSS stylesheet of a default ThemeRoller theme or have created a custom CSS theme from scratch, then it is necessary to perform manual updates for future jQuery UI widgets and plugins.

File Comparison Tools

In order to manually update jQuery UI CSS, you will need a good File Comparison Tool. I have been using
Beyond Compare for many years now and highly recommend this program. Although it should be noted that Beyond Compare is not freeware, it is commercial software.

You can find a list of recommended freeware and payware File Comparison Tools Here and Here.

Manual Updates

To upgrade your custom jQuery UI CSS theme, you will need to do the following:

Back up your custom jQuery UI CSS theme files
Download the latest version of jQuery and copy/upload the file to your JS folder. (Skip this step if you are using a CDN)
Update the link on your web page(s) that references the jQuery library so that it has the latest version number. Example: "js/jquery-1.6.3.min.js" would be changed to "js/jquery-1.6.4.min.js".
Download the latest version of jQuery UI and copy/upload the jquery-ui .js file to your JS folder. Make sure that the themeroller default theme that was originally modified to make your custom theme is selected.
Update the link on your web page(s) that references the jQuery UI library so that it has the latest version number. Example: "js/jquery-ui-1.8.15.custom.min.js" would be changed to "js/jquery-ui-1.8.16.custom.min.js".
Change the file name of the CSS stylesheet for your jQuery UI custom theme so that it reflects the latest version of jQuery UI. Example: "jquery-ui-1.8.15.custom.css" would be changed to "jquery-ui-1.8.16.custom.css"
Update the link on your web page(s) that references the jQuery UI CSS stylesheet so that it reflects the new file name and version as shown above.

Update the CSS Line by Line

Beyond Compare file comparison tool screen. Left side shows original default jQuery UI CSS style sheet. Right side shows new modified CSS style sheet. Click on image for larger view.

If you have heavily modified the CSS stylesheet of a default ThemeRoller theme or have created a custom CSS theme from scratch, then the CSS has to be updated manually line by line.

Using a File Comparison Tool, compare the code of the CSS stylesheet for the newest version of jQuery UI with the code of the CSS stylesheet for your jQuery UI custom theme. Review the differences carefully looking for changes in the new jQuery UI version stylesheet because of new jQuery UI widgets, updates to existing widgets, etc. Disregard
differences due to code changes made to create your custom jQuery UI theme.

In many cases the only change to the jQuery UI theme stylesheet is the version number. If this is the case, just change all instances of the old version number to the new version number, save the file, upload, and you're done.

If the latest version of the jQuery UI theme stylesheet contains NEW CSS code not included in your custom theme CSS, then copy these lines of code to your stylesheet, save then upload.

jQuery UI Tabs

Tabs break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead.

HTML

To add the default jQuery UI Tabs Widget to your .html web page, add the following code:

 
<!-- Begin Tabs Container --> 
<div class="content_container_1"> 
 
<h2>Tabs</h2> 
 
<!-- Begin Tabs Area --> 
 <div id="tabs"> 
	<ul> 
		<li><a href="#tabs-1">jQuery UI</a></li> 
		<li><a href="#tabs-2">jQuery</a></li> 
		<li><a href="#tabs-3">ThemeRoller</a></li> 
	</ul> 
	 
	<!-- Begin Tabs Section #1 --> 
	<div id="tabs-1"> 
		<p> 
		   <img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui.com/" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more.  
		</p> 
		<p> 
		   Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy.  
		</p> 
		<p> 
		   Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic community of web developers. 
		</p> 
		<p> 
		   <a href="http://jqueryui.com/" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a> 
		</p> 
	</div> 
	<!-- End Tabs Section #1 --> 
 
	<!-- Begin Tabs Section #2 --> 
	<div id="tabs-2"> 
		<p> 
		   <img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery.com/" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development.  
		</p> 
		<p> 
		   On the official jQuery website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on  <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more. 
		</p> 
		<p> 
		   jQuery is lightweight, CSS3 compliant and cross browser tested. jQuery was designed to change the way developers write JavaScript! 
		</p> 
		<p> 
		   <a href="http://jquery.com/" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a> 
		</p> 
	</div> 
	<!-- End Tabs Section #2 --> 
 
	<!-- Begin Tabs Section #3 --> 
	<div id="tabs-3"> 
		<p> 
		   <img class="tabs_img" src="images/themeroller.png" width="325" height="325" alt="jQuery" />ThemeRoller is a web application designed and developed for jQuery UI by <a href="http://www.filamentgroup.com/" target="_blank" title="Filament Group, Inc">Filament Group, Inc</a>.   
		</p> 
		<p> 
		   The Themeroller application interface is divided into sections such as header/toolbar, content, clickable states, etc which allows you to design custom CSS themes for <a href="http://jqueryui.com/demos/" target="_blank" title="jQuery UI widgets">jQuery UI widgets</a>.  
		</p> 
		<p> 
		   There is also a <a href="http://jqueryui.com/themeroller/#themeGallery" target="_blank" title="Theme Gallery">Theme Gallery</a> with pre-rolled themes if you do not want to design your own custom jQuery UI theme. Basic jQuery UI widget customization can be accomplished fairly easily by using a default themeroller theme and modifying the theme CSS to suit your needs. 
		</p> 
		<p> 
		   There are additional articles about theming and customization on the official website including <a href="http://jqueryui.com/docs/Theming" target="_blank" title="Theming jQuery UI">"Theming jQuery UI"</a>, <a href="http://jqueryui.com/docs/Theming/API" target="_blank" title="jQuery UI CSS framework">"jQuery UI CSS framework"</a>, and <a href="http://jqueryui.com/docs/Theming/Themeroller" target="_blank" title="ThemeRoller application">"ThemeRoller application"</a>.  
		</p> 
		<p> 
		   <a href="http://jqueryui.com/themeroller/" target="_blank" title="Visit ThemeRoller">Visit ThemeRoller!</a> 
		</p> 
	</div> 
	<!-- End Tabs Section #3 --> 
 
</div>  
<!-- End Tabs Area --> 
 
</div>  
<!-- End Tabs Container -->

Breakdown of the Markup

Most of the jQuery UI Widgets are programmed to expand to 100% width of the content area where they are placed.

The container div "content_container_1" has been set to a fixed width of 800px in the CSS so that the tabbed content area does not expand the entire width of the screen.

The menu "tabs" are generated by an unordered list. The content sections are generated by <div> tags that have unique IDs that correspond to anchor links in the <li></li> tags.

For example: <div id="tabs-1"> corresponds with <a href="#tabs-1">

CSS (style.css)

Add the following CSS code to style.css:

 
/*  Containers 
--------------------------------------------------- */ 
 
.content_container_1	{ 
	width: 800px; 
	margin: 50px 0px 20px 20px; 
} 
 
/*  Tabs  
--------------------------------------------------- */ 
 
#tabs p	{ 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 16px; 
} 
 
#tabs .tabs_img	{ 
	float: left; 
	background-color: #aaa; 
	padding: 8px; 
	margin: 0px 35px 15px 0px; 
}

jQuery (jquery-functions.js)

Initialize the tabs by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery UI Tabs 
 
$(function() { 
	$( "#tabs" ).tabs(); 
});

Custom jQuery UI CSS

The Custom CSS Style Sheet Reference Section of this tutorial contains the specific classes and code needed to style the widgets. Each line of CSS code has an explanation of what it does and how it will change the style of widget(s). Additional details are in the Reference Section Introduction.

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the tabs widget:

Custom CSS Style Sheet Reference - Component Containers
Custom CSS Style Sheet Reference - Interaction States
Custom CSS Style Sheet Reference - Specific jQuery UI Widgets

For example, if you want to change the background image/gradient of the active, selected tab of the tabs menu you would look at the classes listed in the Interaction States section. Explanations of the four interaction states are listed at the top of the section. Since this is an "active" state, the ".ui-state-active" class applies to this tab.

Look at the examples of CSS code for lines that contain the ".ui-state-active" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Accordion

An Accordion doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an accordion.

HTML

To add the jQuery UI Accordion Widget (with ThemeRoller icons) to your .html web page, add the following code:

 
<!-- Begin Accordion Container --> 
<div class="content_container_2"> 
 
<h2>Accordion</h2> 
 
<!-- Begin Accordion --> 
<div id="accordion"> 
 
<!-- Begin Panel #1 --> 
	<h3><a href="#section1">Accordion</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<img src="images/accordion_1.png" width="350" height="180" alt="Accordion" /> 
			<p> 
				Default Accordion 
			</p> 
			<img src="images/accordion_2.png" width="350" height="198" alt="Accordion" /> 
			<p> 
				Accordion with Icons 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Accordion</h2> 
			<p> 
				An <a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Accordion">Accordion</a> doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion. 
			</p> 
			<p> 
				The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled. 
			</p>	 
			<p> 
				If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.  
			</p>		 
			<p> 
				To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #1 --> 
 
 
<!-- Panel #2 --> 
	<h3><a href="#section2">Tabs</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<img src="images/tabs_1.png" width="350" height="117" alt="Tabs" /> 
			<p> 
				Default Tabs 
			</p> 
			<img src="images/tabs_2.png" width="350" height="143" alt="Tabs" /> 
			<p> 
				Tabs Below Content 
			</p> 
			<img src="images/tabs_3.png" width="350" height="58" alt="Tabs" /> 
			<p> 
				Content via Ajax 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Tabs</h2> 
			<p> 
				<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Tabs">Tabs</a> break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead. 
			</p> 
			<p> 
				If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code. 
			</p>		 
			<p> 
				If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code. 
			</p> 
			<p> 
				Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #2 --> 
 
 
<!-- Panel #3 --> 
	<h3><a href="#section3">Datepicker</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<p class="left_col_1"> 
			<img src="images/datepicker_1.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				Displayed Inline 
			</p> 
 
			<p class="left_col_2"> 
			<img src="images/datepicker_2.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				Icon Trigger 
			</p> 
 
			<p class="left_col_3"> 
			<img src="images/datepicker_3.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				With Button Bar 
			</p> 
 
			<p class="left_col_4"> 
			<img src="images/datepicker_4.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				Month &amp; Year Menus 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Datepicker</h2> 
			<p> 
				<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Datepicker">Datepicker</a> is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function. 
			</p> 
			<p>		 
				To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field. 
			</p> 
			<p> 
				You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months. 
			</p>		 
			<p> 
				The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #3 --> 
 
 
<!-- Panel #4 --> 
	<h3><a href="#section4">Dialog</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<img src="images/dialog_1.png" width="350" height="197" alt="Dialog" /> 
			<p> 
				Basic Modal Dialog 
			</p> 
			<img src="images/dialog_2.png" width="350" height="207" alt="Dialog" /> 
			<p> 
				Modal Message 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Dialog</h2> 
			<p> 
				A <a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Dialog">Dialog</a> is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon. 
			</p> 
			<p> 
				A scrollbar will automatically appear if the content length exceeds the maximum height. 
			</p>	 
			<p>		 
				The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for 	any effects you would like to use. 
			</p> 
			<p> 
				You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application. 
			</p>		 
			<p> 
			<a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #4 --> 
 
 
</div> 
<!-- End Accordion --> 
 
</div> 
<!-- End Accordion Container -->

Breakdown of the Markup

Most of the jQuery UI Widgets are programmed to expand to 100% width of the content area where they are placed.

The container div "content_container_2" has been set to a fixed width of 800px in the CSS so that the content area does not expand the entire width of the screen.

The accordion uses <h3></h3> and <div></div> tags to create the header and content panels:

 
<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div>

If you want to use <h3></h3> tags in the content sections of the accordion, you need to add a CSS class such as:

 
<div> 
   <h3 class="subtitle">Subtitle</h3> 
</div>

To format your content <h3></h3> subtitles, you would then add the class to your CSS stylesheet style.css and format as needed:

 
#accordion  h3.subtitle	{ 
	font-size: 18px;  
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-weight: bold;	 
	color: #009999; 
}

CSS (style.css)

Add the following CSS code to style.css:

 
/*  Containers 
--------------------------------------------------- */ 
 
.content_container_2	{ 
	width: 800px; 
	margin: 50px 0px 0px 20px; 
} 
 
/*  Accordion  
--------------------------------------------------- */ 
 
#accordion .content_container_main	{ 
	width: 750px; 
} 
 
#accordion .content_1	{ 
	width: 400px; 
	float: left; 
	font-size: 14px; 
	text-align: center; 
} 
 
#accordion .content_2	{ 
	width: 290px; 
	float: left; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	margin: 0px 0px 0px 30px; 
} 
 
#accordion img 	{ 
	padding: 8px; 
	background-color: #aaa; 
	margin: 10px 0px 5px 0px; 
} 
 
#accordion h2	{ 
	margin: 5px 0px 10px 0px; 
	padding: 0px; 
	font-size: 30px;  
} 
 
#accordion p 	{ 
	margin: 0px 0px 15px 0px; 
	padding: 0px; 
} 
 
#accordion p.left_col_1, #accordion p.left_col_4 	{ 
	float: left; 
	margin: 0px; 
	padding: 0px; 
} 
 
#accordion p.left_col_2, #accordion p.left_col_3 	{ 
	float: right; 
	margin: 0px; 
	padding: 0px; 
}

jQuery (jquery-functions.js)

Initialize the accordion by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery UI Accordion 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-circle-arrow-e", 
		headerSelected: "ui-icon-circle-arrow-s" 
	}; 
	$( "#accordion" ).accordion({ 
		icons: icons 
	});		 
});

Breakdown of the jQuery

To initialize an accordion with default functionality you only need this basic line of code:

 
$(function() { 
	$( "#accordion" ).accordion(); 
});

The jQuery UI accordion includes an icons option that allows you to specify icons for "header" and "headerSelected" and the first half of the jQuery code is where the icons are set. The CSS classes for the default accordion icons are ".ui-icon-triangle-1-e" and ".ui-icon-triangle-1-s".

The accordion included in the basic demo (Demo 2) has been customized so that other jQuery UI icons are used instead of the default icons. For the basic demo, the icons have been changed to "header: ui-icon-circle-arrow-e" and "headerSelected: ui-icon-circle-arrow-s".

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write header: "ui-icon-circle-arrow-e" not header: ".ui-icon-circle-arrow-e".

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the accordion widget:

Custom CSS Style Sheet Reference - Component Containers
Custom CSS Style Sheet Reference - Interaction States
Custom CSS Style Sheet Reference - Default UI Icons

For example, if you want to change the background image/gradient of the accordion panel that displays on hover, you would look at the classes listed in the Interaction States section. Explanations of the four interaction states are listed at the top of the section. Since this is a "hover" state, the ".ui-state-hover" class applies to this accordion panel.

Look at the examples of CSS code for lines that contain the ".ui-state-hover" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Button

The jQuery UI Button Widget can be used to enhance standard form elements like submit and reset buttons, radio buttons and checkboxes. When using this widget for input and submit type of buttons, support is limited to plain text labels with no icons.

HTML

To add jQuery UI Buttons (with icons) to your .html web page, add the following code:

 
<!-- Begin Buttons Container --> 
 
<div class="content_container_3"> 
 
<h2>Button</h2> 
 
<div class="demo"> 
	<button>Button with icon only</button> 
	<button>Button with icon on the left</button> 
	<button>Button with two icons</button> 
	<button>Button with two icons and no text</button> 
	<button>Button with text only</button> 
</div> 
 
</div> 
<!-- End Buttons Container -->

CSS (style.css)

Add the following CSS code to style.css:

 
.content_container_3	{ 
	width: 950px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialize the Buttons by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery UI Button 
 
// First Button 
	$(function() { 
		$( ".demo button:first" ).button({ 
            icons: { 
                primary: "ui-icon-locked" 
            }, 
            text: false 
// Second Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-locked" 
            } 
// Third Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            } 
// Fourth Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            }, 
            text: false 
// Fifth Button 
        }).next().button({ 
		}); 
	});

Breakdown of the jQuery

The buttons are generated by using <button></button> tags in the markup of the web page. The jQuery code references the buttons in each section of the code. The buttons have also been placed in a <div> that has the CSS class "demo" (<div class="demo">). In the jQuery code, the CSS class is referenced in the first section of code:

 
$( ".demo button:first" ).button({ 
   icons: { 
      primary: "ui-icon-locked" 
   }, 
   text: false

The jQuery UI button widget includes an icons option that allows you to specify which jQuery UI icons are to be used on each of the buttons. There are two types of icons "primary" and "secondary". If there is text displayed on a button, then the primary icon will be displayed on the left of the text and the secondary icon will be displayed on the right.

The first section of jQuery code shown above actually does several things:

It references the CSS class .demo so that the functions and formatting apply to any buttons that fall within this CSS class.
"button:first" has been added to indicate that this will be the "first" button displayed in the group of buttons (left to right).
The code references the jQuery UI icon option so that an icon can be added to the button
"text: false" indicates that this button will have an icon only and no text.
This button has no text but does have a single lock icon displayed

After the first button, there are three additional buttons generated by the jQuery code:

 
// Second Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-locked" 
            } 
// Third Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            } 
// Fourth Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            }, 
            text: false 
// Fifth Button 
        }).next().button({ 
		}); 
	});

The line of code that contains ".next()" indicates that each button will be displayed after the "first" button in order from left to right. Just like the first section of code, each of these code sections reference the jQuery UI icon option. Each of these buttons have been formatted a little differently:

Second Button Has text and a lock icon displayed on the left
Third Button Has text, a gear icon on the left and a triangle icon on the right
Fourth Button Has NO text, a gear icon on the left and a triangle icon on the right
Fifth Button Is a text only button and has no icons

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the button widget:

Custom CSS Style Sheet Reference - Interaction States
Custom CSS Style Sheet Reference - Default UI Icons
Custom CSS Style Sheet Reference - Specific jQuery UI Widgets

For example, if you want to change the background image/gradient of the default state of the buttons, you would look at the classes listed in the Interaction States section. Explanations of the four interaction states are listed at the top of the section. Since this is a "default" state, the ".ui-state-default" class applies to this accordion panel.

Look at the examples of CSS code for lines that contain the ".ui-state-default" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #696969; background: #353535 url(images/ui-bg-4.png) 50% 50% repeat-x; font-weight: bold; color: #eee; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Datepicker

Datepicker is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function.

HTML

To add jQuery UI Datepicker Widget (displayed inline) to your .html web page, add the following code:

 
<!-- Begin Datepicker Container --> 
<div class="content_container_4"> 
 
<h2>Datepicker</h2> 
 
<div id="datepicker"></div> 
 
</div> 
<!-- End Datepicker Container -->

Breakdown of the Markup

So that the datepicker would be displayed embedded inline on a web page, the .datepicker() was called on a div instead of a form field.

jQuery (jquery-functions.js)

Initialize the Datepicker Widget by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery UI Datepicker 
 
$(function() { 
	$("#datepicker").datepicker({ 
	}); 
});

CSS (style.css)

Add the following CSS code to style.css:

 
.content_container_4	{ 
	width: 400px; 
	margin: 50px 0px 20px 20px; 
}

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the datepicker widget:

Custom CSS Style Sheet Reference - Component Containers
Custom CSS Style Sheet Reference - Interaction States
Custom CSS Style Sheet Reference - Interaction Cues
Custom CSS Style Sheet Reference - Default UI Icons
Custom CSS Style Sheet Reference - Specific jQuery UI Widgets

For example, if you want to change the background image/gradient of the current / highlighted date button, you would look at the classes listed in the Interaction Cues section. Since this is a "highlight" state, the ".ui-state-highlight" class applies to this date button.

Look at the examples of CSS code for lines that contain the ".ui-state-highlight" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fff; background: #eee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #2e7db2; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Slider

The default jQuery UI Slider Widget is horizontal and has a single handle that can be moved with the mouse.

HTML

To add the default jQuery UI Slider Widget to your .html web page, add the following code:

 
<!-- Begin Slider Container --> 
<div class="content_container_5"> 
 
<h2>Slider</h2> 
 
<div id="slider"></div> 
 
</div> 
<!-- End Slider Container -->

CSS (style.css)

Add the following CSS code to style.css:

 
.content_container_5	{ 
	width: 875px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialize the Slider Widget by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery UI Slider 
 
	$(function() { 
		$( "#slider" ).slider(); 
	});

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the slider widget:

Custom CSS Style Sheet Reference - Interaction States

For example, if you want to change the background image/gradient of the slider handle that displays on hover, you would look at the classes listed in the Interaction States section. Explanations of the four interaction states are listed at the top of the section. Since this is a "hover" state, the ".ui-state-hover" class applies to this accordion panel.

Look at the examples of CSS code for lines that contain the ".ui-state-hover" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Progress Bar

The default jQuery UI Progress Bar Widget displays the current % complete for a process.

HTML

To add the default jQuery UI Progress Bar Widget to your .html web page, add the following code:

 
<!-- Begin Progress Bar Container --> 
<div class="content_container_6"> 
	<h2>Progress Bar</h2> 
 
	<div id="progressbar"></div> 
</div> 
<!-- End Progress Bar Container -->

CSS (style.css)

Add the following CSS code to style.css:

 
.content_container_6	{ 
	width: 875px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialize the Progress Bar Widget by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery Progress Bar 
 
$(function() { 
	$( "#progressbar" ).progressbar({ 
		value: 37 
	}); 
});

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the progress bar widget:

Custom CSS Style Sheet Reference - Component Containers
Custom CSS Style Sheet Reference - Specific jQuery UI Widgets

For example, if you want to change the background image/gradient of the default % complete bar, you would look at the classes listed in the Specific jQuery UI Widgets section.

Look at the examples of CSS code for lines that contain the ".ui-progressbar .ui-progressbar-value" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

In this case, I wanted the progress bar to use a different background image that the other widgets. Since the component container classes affect multiple widgets, I modified the CSS line of code that is specific to the progress bar.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Dialog

A Dialog is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon. A scrollbar will automatically appear if the content length exceeds the maximum height.

HTML

To add a jQuery UI Dialog Widget that includes Animation and a UI Button to your .html web page, add the following code:

 
<!-- Begin Dialog Container --> 
<div class="content_container_7"> 
 
<h2>Dialog</h2> 
 
<div id="dialog" title="Basic dialog"> 
	<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
 
<button id="opener">Open Dialog</button> 
 
</div> 
<!-- End Dialog Container -->

Breakdown of the Markup

The title of the dialog box is set by adding the desired text in a title tag placed in within the <div> tag like this:

 
<div id="dialog" title="Basic dialog">

The content of the dialog box is contained within the <p></p> tags.

CSS (style.css)

Add the following CSS code to style.css:

 
.content_container_7	{ 
	width: 400px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialize the Dialog Widget by adding the following code in the external JavaScript file jquery-functions.js.

 
// jQuery UI Dialog 
 
// increase the default animation speed to exaggerate the effect 
$.fx.speeds._default = 1000; 
$(function() { 
	$( "#dialog" ).dialog({ 
		autoOpen: false, 
		show: "blind", 
		hide: "explode" 
	}); 
 
	$( "#opener" ).click(function() { 
		$( "#dialog" ).dialog( "open" ); 
		return false; 
	}); 
}); 
 
// Dialog Button 
$(function() { 
	$( ".content_container_7 button" ).button({ 
        icons: { 
            primary: "ui-icon-newwin" 
        } 
    }); 
});

Breakdown of the jQuery

"autoOpen: false" will make the dialog remain hidden until .dialog("open") is called on it. In this case, the dialog is being called when the dialog button is clicked. Without this line of code, the dialog would auto-open by default.

This dialog has also been set so that when the dialog button is clicked, the dialog window is displayed with a "blind" effect. When the "x" button is clicked to close the dialog window, the dialog closes with an "explode" effect.

An ID "#opener" has been applied to the jQuery dialog open event portion of the code. This ID has also been added to the dialog button: <button id="opener">Open Dialog</button>. This ID ties the button and the dialog open event together, so that the dialog will open when the button is clicked.

The jQuery UI Button Widget was used to make a nicely formatted button to open the dialog. The Button Widget is covered in greater detail in another section of this tutorial. However, below is a breakdown of the dialog button code. This is the jQuery code used to generate the dialog button:

 
$(function() { 
	$( ".content_container_7 button" ).button({ 
        icons: { 
            primary: "ui-icon-newwin" 
        } 
    }); 
});

The button is generated by using a <button></button> tag. The button along with the dialog widget has been placed in a <div> that has the CSS class "content_container_7 button" (<div class="content_container_7">). This CSS class has also been referenced in the jQuery code.

The jQuery UI button widget includes an icons option that allows you to specify which jQuery UI icons are to be used on each of the buttons. The dialog button has been set to display text and a "new window" icon displayed on the left of the text.

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the dialog widget:

Custom CSS Style Sheet Reference - Component Containers
Custom CSS Style Sheet Reference - Specific jQuery UI Widgets

For example, if you want to change the background image/gradient of the dialog title bar, you would look at the classes listed in the Specific jQuery UI Widgets section.

Look at the examples of CSS code for lines that contain the ".ui-dialog .ui-dialog-titlebar" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image.

In this case, I wanted the dialog title bar to use a different background image that the other widgets. Since the component container classes affect multiple widgets, I modified the CSS line of code that is specific to the progress bar.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

jQuery UI Highlight / Error

HTML

To add Highlight / Error boxes to your .html web page (so that you can properly format the jQuery UI CSS stylesheet), add the following code:

 
<!-- Begin Highlight / Error Container --> 
<div class="content_container_8"> 
 
<h2>Highlight / Error</h2> 
 
	<div class="ui-widget-highlight"> 
		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> 
 
			<strong>Hey!</strong> Sample ui-state-highlight style.</p> 
		</div> 
	</div> 
 
	<br/> 
	<div class="ui-widget-error"> 
		<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>  
			<strong>Alert:</strong> Sample ui-state-error style.</p> 
		</div> 
	</div> 
 
</div> 
<!-- End Highlight / Error Container -->

Breakdown of the Markup

The container div "content_container_8" has been set to a fixed width of 250px in the CSS so that the content area is reduced in size. If the CSS did not set a fixed width, the content boxes would stretch to 100% width.

The default font-size for all of the demos is set at 18px. CSS classes .ui-widget-highlight and .ui-widget-error have been added to the markup and style.css so that the font size would be reduced to 12px.

CSS (style.css)

Add the following CSS code to style.css:

 
/*  Containers 
--------------------------------------------------- */ 
 
.content_container_8	{ 
	width: 250px; 
	margin: 50px 0px 70px 20px; 
} 
 
/*  Highlight / Error 
--------------------------------------------------- */ 
 
.ui-widget-highlight, .ui-widget-error	{ 
	font-size: 12px; 
}

Custom jQuery UI CSS

These sections of the Stylesheet Reference contain the jQuery UI classes that apply styles to the highlight and error:

Custom CSS Style Sheet Reference - Interaction Cues
Custom CSS Style Sheet Reference - Default UI Icons

For example, if you want to change the background image/gradient of the highlight box and the font color, you would look at the classes listed in the Interaction Cues section. Since this is a "highlight" state, the ".ui-state-highlight" class applies.

Look at the examples of CSS code for lines that contain the ".ui-state-highlight" class and includes a CSS background image. This example line of code contains the class and a CSS background image:

 
.ui-state-highlight {border: 1px solid #fff; background: #eeeeee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #000; }

Now that you have found the appropriate code example, find this line of code in the jQuery UI Theme stylesheet and replace the background image with your own custom image and change the font color.

Remember: All ThemeRoller themes have the same CSS classes. So class names will be exactly the same in every default theme. However, the CSS code and styling may be different.

Replacing jQuery UI Default Icons with Custom Icons

jQuery UI ThemeRoller provides a full set of CSS framework icons that are generated using image sprites. You can view all of the available default icons on ThemeRoller. If you hover over the icons you can see the class names.

Although the default icons provided by jQuery UI ThemeRoller are very nice looking, there may be times when you want to use custom icons instead. Using your own custom icons requires heavily modifying the jQuery UI CSS stylesheet and writing custom CSS code.

If you would like to create a CSS Image sprite for your custom icons this article can help you do that.

The primary benefit of using CSS image sprites is tbat they help reduce the number of web browser http requests and help reduce the web page load time. The downside of using CSS image sprites is that if you need to change an icon for example, you have to modify the image sprite in a graphics program like Photoshop, recompile and resave the sprite. Additionally, if you need to update a site that you did not originally design, you may not have the original graphic files for the sprites. This makes updating that single icon more difficult.

This tutorial uses individual png images for the custom icons instead of CSS image sprites.

Note: Although it is possible to use larger sized icons, the standard 16 x 16 size icons seem to work the best with jQuery UI widgets. If you want to try to use larger sized icons, find the below code and change the icon size.

 
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

Custom Icons - jQuery UI Accordion #1

Demo 8 included in the source files, displays four accordion widgets. Each accordion widget uses different custom icons and jQuery UI options.

Accordion #1 of Demo 8 is a standard accordion with panels that open onClick and uses two custom icons:

Green Circle Arrow Down Icon for the active/selected accordion panel.
Green Circle Arrow Right Icon for the panels on default state, on mouseover and on keyboard focus.

Before You Begin

Once you have completed Steps 1 through 6 of the tutorial and the instructions in the jQuery UI Accordion section, you can proceed to add custom icons to the jQuery UI accordion. There is also a section called "Replacing jQuery UI Default Icons with Custom Icons" that provides some additional information and should be read before proceeding.

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icons with custom icons. The Custom CSS Style Sheet Reference - Custom Icons - Accordion #1 section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

jQuery (jquery-functions.js)

The jQuery UI Accordion code in the jquery-functions.js file needs to be modified to reflect the new UI CSS classes that have been created for "header" and "headerSelected" in the custom CSS code. In this case, the class is the same for both: .ui-icon-green-circle-arrow-e. You do not need to add the classes for "hover" or "focus".

Edit the accordion code in the jquery-functions.js file so that .ui-icon-green-circle-arrow-e has been applied to the "header" and "headerSelected" like this:

 
// jQuery UI Accordion #1 - Standard, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-green-circle-arrow-e", 
		headerSelected: "ui-icon-green-circle-arrow-s" 
	}; 
	$( "#accordion_1" ).accordion({ 
		icons: icons, 
		autoHeight: false, 
		navigation: true 
	});		 
});

Breakdown of the jQuery

jQuery UI Accordion includes an icons option that allows you to specify icons for "header" and "headerSelected"
and the first half of the jQuery code is where the icons are set. New CSS classes have been created so that custom icons can be used. The jQuery code has been changed to reflect those new classes:

header: "ui-icon-green-circle-arrow-e"
headerSelected: "ui-icon-green-circle-arrow-s"

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write header: "ui-icon-green-circle-arrow-e" not header: ".ui-icon-green-circle-arrow-e".

autoHeight causes the accordion to use the highest content part as a height reference for all other parts. This means that the content area height for all accordion panels will be the same height of the panel with the most content in it. For this accordion, autoHeight has been set to "false" so each accordion panel will have a height based on it's own content. The accordion widget has autoHeight enabled by default.

navigation: true will cause the accordion to look for the anchor that matches location.href and activate it. This means that if a panel matches the current location, that panel will open automatically on page load.

That's all there is to be done. You should now have custom icons displayed in the accordion widget.

Custom Icons - jQuery UI Accordion #2

Demo 8 included in the source files, displays four accordion widgets. Each accordion widget uses different custom icons and jQuery UI options.

By default, accordions always keep one section open. Accordion #2 has been set so that the collapsible option is true. The panels will open and close onClick. This accordion also uses two custom icons:

Cog Minus Icon for the active/selected accordion panel.
Cog Plus Icon for the panels on default state, on mouseover and on keyboard focus.

Before You Begin

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icons with custom icons. The Custom CSS Style Sheet Reference - Custom Icons - Accordion #2 section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

jQuery (jquery-functions.js)

The jQuery UI Accordion code in the jquery-functions.js file needs to be modified to reflect the new UI CSS classes that have been created for "header" and "headerSelected" in the custom CSS code. The new CSS classes are .ui-icon-cog-plus and .ui-icon-cog-minus. You do not need to add the classes for "hover" or "focus".

Edit the accordion code in the jquery-functions.js file so that .ui-icon-cog-plus has been applied to the "header" and .ui-icon-cog-minus has been applied to "headerSelected" like this:

 
// jQuery UI Accordion #2 - Collapsible, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-cog-plus", 
		headerSelected: "ui-icon-cog-minus" 
	}; 
	$( "#accordion_2" ).accordion({ 
		collapsible: true,  
		icons: icons 
	});		 
});

Breakdown of the jQuery

header: "ui-icon-cog-plus"
headerSelected: "ui-icon-cog-minus"

Accordions always keep one section open by default. Adding "collapsible: true" causes the accordion panels to be collapsible. This means that you can open and close an accordion panel by a trigger event, click is the default.

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write header: "ui-icon-cog-plus" not header: ".ui-icon-cog-plus".

That's all there is to be done. You should now have custom icons displayed in the accordion widget.

Custom Icons - jQuery UI Accordion #3

Demo 8 included in the source files, displays four accordion widgets. Each accordion widget uses different custom icons and jQuery UI options.

By default, accordions always keep one section open. Accordion #3 has been set so that the collapsible option is true. However, the panels for this accordion will open and close onHover. This accordion also uses two custom Icons:

Red Circle Delete/Minus Icon for the active/selected accordion panel.
Green Circle Add/Plus Icon for the panels on default state, on mouseover and on keyboard focus.

Before You Begin

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icons with custom icons. The Custom CSS Style Sheet Reference - Custom Icons - Accordion #3 section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

jQuery (jquery-functions.js)

The jQuery UI Accordion code in the jquery-functions.js file needs to be modified to reflect the new UI CSS classes that have been created for "header" and "headerSelected" in the custom CSS code. The new CSS classes are .ui-icon-green-add and .ui-icon-red-delete. You do not need to add the classes for "hover" or "focus".

Edit the accordion code in the jquery-functions.js file so that .ui-icon-green-add has been applied to the "header" and .ui-icon-red-delete has been applied to "headerSelected" like this:

 
// jQuery UI Accordion #3 - Collapsible, onHover, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-green-add", 
		headerSelected: "ui-icon-red-delete" 
	}; 
	$( "#accordion_3" ).accordion({ 
		event: "mouseover", 
		collapsible: true,  
		icons: icons, 
		autoHeight: false, 
		navigation: true 
	});		 
});

Breakdown of the jQuery

header: "ui-icon-green-add"
headerSelected: "ui-icon-red-delete"

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write header: "ui-icon-green-add" not header: ".ui-icon-green-add".

That's all there is to be done. You should now have custom icons displayed in the accordion widget.

Custom Icons - jQuery UI Accordion #4

Demo 8 included in the source files, displays four accordion widgets. Each accordion widget uses different custom icons and jQuery UI options.

Accordion #4 of Demo 8 has panels that will open onClick (they are not set to be collapsible) and uses three custom icons:

Red Circle Arrow Down Icon for the active/selected accordion panel.
Red Circle Arrow Right Icon for the default state accordion panels.
Blue Circle Arrow Right Icon for the panels on mouseover and on keyboard focus.

Before You Begin

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icons with custom icons. The Custom CSS Style Sheet Reference - Custom Icons - Accordion #4 section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

jQuery (jquery-functions.js)

The jQuery UI Accordion code in the jquery-functions.js file needs to be modified to reflect the new UI CSS classes that have been created for "header" and "headerSelected" in the custom CSS code. The new CSS classes are .ui-icon-custom-next and .ui-icon-custom-down. You do not need to add the classes for "hover" or "focus".

Edit the accordion code in the jquery-functions.js file so that .ui-icon-custom-next has been applied to the "header" and .ui-icon-custom-down has been applied to "headerSelected" like this:

 
// jQuery UI Accordion #4 - onClick, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-custom-next", 
		headerSelected: "ui-icon-custom-down" 
	}; 
	$( "#accordion_4" ).accordion({ 
		icons: icons 
	});		 
});

Breakdown of the jQuery

header: "ui-icon-custom-next"
headerSelected: "ui-icon-custom-down"

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write header: "ui-icon-custom-next" not header: ".ui-icon-custom-next".

That's all there is to be done. You should now have custom icons displayed in the accordion widget.

Custom Icons - jQuery UI Button

Before You Begin

Once you have completed Steps 1 through 6 of the tutorial and the instructions in the jQuery UI Button section, you can proceed to add custom icons to jQuery UI buttons. There is also a section called "Replacing jQuery UI Default Icons with Custom Icons" that provides some additional information and should be read before proceeding.

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icons with custom icons. The Custom CSS Style Sheet Reference - Custom Icons - Buttons section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

jQuery (jquery-functions.js)

The jQuery UI Button code in the jquery-functions.js file needs to be modified to reflect the new UI CSS classes that have been created in the custom CSS code. The new CSS classes are:

.ui-icon-custom-locked
.ui-icon-custom-gear
.ui-icon-custom-arrow-down
.ui-icon-custom-gear-

Edit the Button code in the jquery-functions.js file so that the new classes are included like this:

 
// jQuery UI Button 
 
$(function() { 
	$( ".demo button:first" ).button({ 
        icons: { 
            primary: "ui-icon-custom-locked" 
        }, 
        text: false 
    }).next().button({ 
        icons: { 
            primary: "ui-icon-custom-locked" 
        } 
    }).next().button({ 
        icons: { 
            primary: "ui-icon-custom-gear", 
            secondary: "ui-icon-custom-arrow-down" 
        } 
    }).next().button({ 
        icons: { 
            primary: "ui-icon-custom-gear", 
            secondary: "ui-icon-custom-arrow-down" 
        }, 
        text: false 
    }).next().button({ 
        icons: { 
			primary: "ui-icon-custom-locked", 
            secondary: "ui-icon-custom-gear-2" 
        } 
	}); 
});

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write primary: "ui-icon-custom-locked" not primary: ".ui-icon-custom-locked".

That's all there is to be done. You should now have custom icons displayed in the button widget.

Custom Icons - Datepicker

Before You Begin

Once you have completed Steps 1 through 6 of the tutorial and the instructions in the jQuery UI Datepicker section, you can proceed to add custom icons to the jQuery UI datepicker widget. There is also a section called "Replacing jQuery UI Default Icons with Custom Icons" that provides some additional information and should be read before proceeding.

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

Customizing the icons for the datepicker is done a little differently than the other jQuery UI widgets. Instead of creating custom icon classes for the datepicker, the datepicker CSS code is going to be modified instead.

The Custom CSS Style Sheet Reference - Custom Icons - Datepicker section contains the modified CSS code so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */. There are additional modifications that need to made to the datepicker CSS code explained in the Custom CSS Style Sheet Reference - Custom Icons - Datepicker section.

That's all there is to be done. The code in the jquery-functions.js file does not need to be modified. You should now have custom icons displayed in the datepicker widget.

Custom Icons - Dialog Button

Before You Begin

Once you have completed Steps 1 through 6 of the tutorial and the instructions in the jQuery UI Button section, you can proceed to add a custom icon to jQuery UI dialog button. There is also a section called "Replacing jQuery UI Default Icons with Custom Icons" that provides some additional information and should be read before proceeding.

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icon with a custom icon. The Custom CSS Style Sheet Reference - Custom Icons - Dialog Button section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

jQuery (jquery-functions.js)

The code for the jQuery UI dialog button in the jquery-functions.js file needs to be modified to reflect the new UI CSS class that has been created in the custom CSS code. The new CSS class is: ".ui-icon-custom-newwin"

Edit the dialog button code in the jquery-functions.js file so that the new class is included like this:

 
// Dialog Button 
$(function() { 
	$( ".content_container_7 button" ).button({ 
        icons: { 
            primary: "ui-icon-custom-newwin" 
        } 
	}); 
});

Note: Do not include the "dot" when adding the classes to the jQuery code. So for example you would write primary: "ui-icon-custom-newwin" not primary: ".ui-icon-custom-newwin".

That's all there is to be done. You should now have a custom icon displayed in the dialog button.

Custom Icons - Highlight / Error

Before You Begin

Once you have completed Steps 1 through 6 of the tutorial and the instructions in the jQuery UI Highlight / Error section, you can proceed to add custom icons to jQuery UI Highlight / Error. There is also a section called "Replacing jQuery UI Default Icons with Custom Icons" that provides some additional information and should be read before proceeding.

Custom jQuery UI CSS

First, read the Custom CSS Style Sheet Reference - Custom Icons section and modify the jQuery UI stylesheet as described.

The next step is to add custom CSS code that will replace the default jQuery UI icons with custom icons. The Custom CSS Style Sheet Reference - Custom Icons - Highlight / Error section contains the CSS custom code and lists the new UI classes that have been created so that the custom icons can be added. Copy and paste the custom CSS code into your stylesheet just below the three lines of code in the Icons section noted as /* states and images */.

Modify the HTML

The markup in the web page needs to be modified to reflect the new UI CSS classes that have been created in the custom CSS code. The new CSS classes are:

.ui-icon-custom-info
.ui-icon-custom-alert

Edit the markup so that the new classes are included like this:

 
<!-- Begin Highlight / Error Container --> 
<div class="content_container_8"> 
 
	<h2>Highlight / Error</h2> 
 
	<div class="ui-widget-highlight"> 
		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-custom-info" style="float: left; margin-right: .3em;"></span> 
 
			<strong>Hey!</strong> Sample ui-state-highlight style.</p> 
		</div> 
	</div> 
 
	<br/> 
	<div class="ui-widget-error"> 
		<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-custom-alert" style="float: left; margin-right: .3em;"></span>  
			<strong>Alert:</strong> Sample ui-state-error style.</p> 
 
		</div> 
	</div> 
 
</div> 
<!-- End Highlight / Error Container -->

That's all there is to be done. You should now have custom icons displayed in the Highlight / Error boxes.

Custom CSS Style Sheet Reference - Introduction

The Custom CSS Stylesheet Reference Section of this tutorial contains the specific classes and code needed to style the widgets. Each line of CSS code has an explanation of what it does and how it will change the style of widget(s). The jQuery UI Stylesheets in all of the demos in the source files zip have also been heavily commented to explain how certain lines of CSS code style the widgets.

jQuery UI features a CSS Framework for building custom jQuery widgets that includes classes used by all of the default ThemeRoller themes. By using the same classes and markup conventions, it allows code integration and theming to be fairly easy. So no matter what ThemeRoller theme you choose to modify, the default classes listed in the Reference Section will be exactly the same, only the CSS code and styling will be different.

Note: The jQuery UI classes for component containers, interaction states, interaction cues and default icons apply styles to multiple widgets. You may want a specific widget(s) to have slightly different styles applied to them.
This section of the tutorial covers how to apply different styles to specific widgets.

Custom CSS Style Sheet Reference - Component Containers

.ui-widget-content- Applies styles to the content container of jQuery UI Widgets which includes tabs, accordion, datepicker and dialog.

.ui-widget-header - Applies styles to the header container of jQuery UI Widgets which includes tabs, datepicker, dialog and progress bar.

Examples:

 
.ui-widget-content { border: 1px solid #666; background-color: #000; color: #fff; }

CSS formats the content container with a dark gray border, black background color and white font color.

 
.ui-widget-content a { color: #80cccc; }

CSS formats the normal default links in the content container with a light green font color.

 
.ui-widget-content a:hover { color: #009999; }

CSS formats the hover / mouse over links in the content container with a dark green font color. This line of code is not included in the default ThemeRoller Theme CSS stylesheet. If you want the links in the widget content containers to have a different color on mouseover, add the above code just below ".ui-widget-content a { color: #hex-color; }"

 
.ui-widget-header { border: 1px solid #191919; background: #666 url(images/ui-bg-2.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }

CSS formats the header container with an almost black border color, dark gray background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only, white font color that is also bold.

Custom CSS Style Sheet Reference - Interaction States

.ui-state-default - Applies "clickable default" container styles to jQuery UI Widgets which includes tabs, accordion, buttons, datepicker and slider.

.ui-state-hover - Applies "clickable hover" container styles on mouseover to jQuery UI Widgets which includes tabs, accordion, buttons, datepicker and slider.

.ui-state-focus - Applies "clickable hover" container styles on keyboard focus to jQuery UI Widgets which includes tabs, accordion, buttons, datepicker and slider.

.ui-state-active - Applies "clickable active" container styles on mousedown to jQuery UI Widgets which includes tabs, accordion, buttons, datepicker and slider.

Examples:

 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #696969; background: #353535 url(images/ui-bg-4.png) 50% 50% repeat-x; font-weight: bold; color: #eee; }

CSS formats the "clickable default" container styles with a dark gray border, almost black background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only, bold font that is a very light gray color.

 
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #eee; text-decoration: none; }

CSS formats the normal default links in the "clickable default" container with a very light gray font color and no underline.

 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

CSS formats the "clickable hover" styles on mouseover and on keyboard focus with an almost black border, black background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only, bold font that is a white color.

 
.ui-state-hover a, .ui-state-hover a:hover { color: #fff; text-decoration: none; }  
[/html] 
<p> 
CSS formats the hover / mouse over links in the "clickable hover" container styles on mouseover with a white font color and no underline. 
</p> 
[css] 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

CSS formats the "clickable active" container styles on mousedown with a dark green border, dark green background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only, bold font that is a white color.

 
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; text-decoration: none; }

CSS formats the "clickable active" link styles (default, active, visited) on mousedown with a white font color and no underline.

Custom CSS Style Sheet Reference - Interaction Cues

.ui-state-highlight

Applies "highlight" container styles to jQuery UI Widgets which includes datepicker and highlight message.

Examples:

 
.ui-state-highlight {border: 1px solid #fff; background: #eee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #000; }

CSS formats the "highlight" container with a white border, very light gray background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only, and black font color.

 
.ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fff; background: #eee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #2e7db2; }

CSS formats the "highlight" for the widget content and header containers with a white border, very light gray background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only, and medium steel blue font color.

Custom CSS Style Sheet Reference - Default UI Icons

.ui-icon - This is the base class that is to be applied to icon elements. The size of the icons to be used are set by this class. This class also sets the default CSS sprite image to be used for icons.

Examples:

 
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

CSS formats the icons to be size 16px x 16px and sets the default CSS sprite image.

 
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

CSS sets the default sprite image for icons that are displayed in the header container.

 
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }

CSS sets the default sprite image for icons that are displayed in "clickable default" container styles.

 
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_009999_256x240.png); }

CSS sets the default sprite image for icons that are displayed in "clickable hover" styles on mouseover and on keyboard focus.

 
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

CSS sets the default sprite image for icons that are displayed in "clickable active" container styles on mousedown.

Custom CSS Style Sheet Reference - Specific jQuery UI Widgets

All of the default ThemeRoller themes use the jQuery UI CSS Framework so that they all share the same classes and stylesheet format. The lines of code in the first half of the CSS stylesheet for the ThemeRoller themes apply styles to ALL of the jQuery UI Widgets. There may be cases where you want to apply the same styles to most of the widgets, but want to apply a different style to a specific widget(s).

The bottom half of the CSS stylesheet lets you modify the styles for specific widgets. Below are some examples of CSS styles applied to specific widgets.

Button Text Element

 
.ui-button .ui-button-text { display: block; line-height: 1.4; font-size: 11px; }

CSS generates the buttons using a block element box, sets the text line height and font size of the buttons. If your web page uses a large sized body font, then the size of the buttons may end up too big. Changing the font size of the buttons will reduce the button size.

 
.ui-button-text-only .ui-button-text { padding: .4em 1em; }

CSS sets the padding of the text of a button that contains no icons (text only button)

 
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 3em; }

CSS sets the padding of the primary icon in this order: top, right, bottom, left.

 
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 3em .4em 3em; }

CSS sets the padding of the secondary icon in this order: top, right, bottom, left.

 
.ui-button-text-icons .ui-button-text { padding-left: 3em; padding-right: 3em; }

CSS sets the left and right padding of the text of a button that contains a primary and secondary icon.

Tabs

 
.ui-tabs .ui-tabs-nav li a:hover { color: #009999; text-decoration: none; }

CSS sets the hover / mouse over link color for the tabs widget. This overrides the .ui-state-hover class for tabs widget only. This line of code is not included in the default ThemeRoller Theme CSS stylesheet. If you want the hover / mouse over link color of the menu tabs to have a different color on mouseover, add the above code just below the line that has the class ".ui-tabs .ui-tabs-nav li a".

Datepicker

 
.ui-datepicker .ui-datepicker-header { position:relative; padding:2px 0px 2px 0px; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

CSS formats the datepicker header container with padding top, right, bottom, left, a dark green border, dark green background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only.

Progress Bar

 
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

CSS formats the datepicker header container with a dark green border, dark green background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only.

Dialog

 
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

CSS formats the dialog box header container with a dark green border, dark green background color and specific background image that has a 50% horizontal position, 50% vertical position, repeats horizontally only.

Custom CSS Style Sheet Reference - Custom Icons

Demo 7 in the source files uses custom icons instead of the jQuery UI ThemeRoller default icons. In order to accomplish this, the Icons section of the jQuery UI CSS stylesheet had to be heavily modified.

In the /* states and images */ section of the Icons section of the jQuery UI CSS stylesheet, the first three lines of code were not modified:

 
/* states and images */ 
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }  
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_cccccc_256x240.png); } 
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

The remaining five lines of code in the /* states and images */ have been removed and the classes have been included in new custom lines of CSS code. The custom lines of code have been divided by widget type:

Accordion #1
Accordion #2
Accordion #3
Accordion #4
Buttons
Datepicker
Highlight / Error
Dialog Button

In addition to adding custom lines of CSS code, the "jquery-functions.js" needs to be modified to reflect the new CSS classes that have been created for the custom icons. This is covered in earlier sections of this tutorial.

The blocks of code in the following tutorial sections allow you to add custom icons to each widget as specified.

Custom CSS Style Sheet Reference - Custom Icons - Accordion #1

 
/* Custom Icons Accordion #1 */ 
.ui-state-default .ui-icon-green-circle-arrow-e, .ui-state-hover .ui-icon-green-circle-arrow-e, .ui-state-focus .ui-icon-green-circle-arrow-e { background-image: url(images/next_1.png); }  
.ui-state-active .ui-icon-green-circle-arrow-s {background-image: url(images/down_1.png); }

New UI classes:

.ui-state-default .ui-icon-green-circle-arrow-e - Icon that is displayed on the default state accordion panels.
.ui-state-hover .ui-icon-green-circle-arrow-e - Icon that is displayed on the accordion panels on mouseover.
.ui-state-focus .ui-icon-green-circle-arrow-e - Icon that is displayed on the accordion panels on keyboard focus.
.ui-state-active .ui-icon-green-circle-arrow-s - Icon that is displayed on the active/selected accordion panel.

Custom CSS Style Sheet Reference - Custom Icons - Accordion #2

 
/* Custom Icons Accordion #2 */ 
.ui-state-default .ui-icon-cog-plus, .ui-state-hover .ui-icon-cog-plus, .ui-state-focus .ui-icon-cog-plus { background-image: url(images/cog_add.png); }  
.ui-state-active .ui-icon-cog-minus {background-image: url(images/cog_delete.png); }

New UI classes:

.ui-state-default .ui-icon-cog-plus - Icon that is displayed on the default state accordion panels.
.ui-state-hover .ui-icon-cog-plus - Icon that is displayed on the accordion panels on mouseover.
.ui-state-focus .ui-icon-cog-plus - Icon that is displayed on the accordion panels on keyboard focus.
.ui-state-active .ui-icon-cog-minus - Icon that is displayed on the active/selected accordion panel.

Custom CSS Style Sheet Reference - Custom Icons - Accordion #3

 
/* Custom Icons Accordion #3 */ 
.ui-state-default .ui-icon-green-add, .ui-state-hover .ui-icon-green-add, .ui-state-focus .ui-icon-green-add  { background-image: url(images/add.png); }  
.ui-state-active .ui-icon-red-delete {background-image: url(images/delete.png); }

New UI classes:

.ui-state-default .ui-icon-green-add - Icon that is displayed on the default state accordion panels.
.ui-state-hover .ui-icon-green-add - Icon that is displayed on the accordion panels on mouseover.
.ui-state-focus .ui-icon-green-add - Icon that is displayed on the accordion panels on keyboard focus.
.ui-state-active .ui-icon-red-delete - Icon that is displayed on the active/selected accordion panel.

Custom CSS Style Sheet Reference - Custom Icons - Accordion #4

 
/* Custom Icons Accordion #4 */ 
.ui-state-default .ui-icon-custom-next { background-image: url(images/next_2.png); }  
.ui-state-hover .ui-icon-custom-next, .ui-state-focus .ui-icon-custom-next {background-image: url(images/next_3.png); }  
.ui-state-active .ui-icon-custom-down {background-image: url(images/down_2.png); }

New UI classes have been created so that the custom icons can be added:

.ui-state-default .ui-icon-custom-next - Icon that is displayed on the default state accordion panels.
.ui-state-hover .ui-icon-custom-next - Icon that is displayed on the accordion panels on mouseover.
.ui-state-focus .ui-icon-custom-next - Icon that is displayed on the accordion panels on keyboard focus.
.ui-state-active .ui-icon-custom-down - Icon that is displayed on the active/selected accordion panel.

Custom CSS Style Sheet Reference - Custom Icons - Buttons

Buttons - Default

 
/* Custom Icons Buttons - Default State */ 
.ui-state-default .ui-icon-custom-gear { background-image: url(images/process_1.png); }  
.ui-state-default .ui-icon-custom-gear-2 { background-image: url(images/process_info.png); }  
.ui-state-default .ui-icon-custom-locked { background-image: url(images/lock_1.png); }  
.ui-state-default .ui-icon-custom-arrow-down { background-image: url(images/orange_arrow_down.png); }

New UI classes have been created so that the custom icons can be added:

.ui-state-default .ui-icon-custom-gear
.ui-state-default .ui-icon-custom-gear-2
.ui-state-default .ui-icon-custom-locked
.ui-state-default .ui-icon-custom-arrow-down

Buttons - Hover

 
/* Custom Icons Buttons - Hover */ 
.ui-state-hover .ui-icon-custom-gear { background-image: url(images/process_accept.png); }  
.ui-state-hover .ui-icon-custom-gear-2 { background-image: url(images/process_1.png); }  
.ui-state-hover .ui-icon-custom-arrow-down { background-image: url(images/green_arrow_down.png); }

New UI classes have been created so that the custom icons can be added:

.ui-state-hover .ui-icon-custom-gear
.ui-state-hover .ui-icon-custom-gear-2
.ui-state-hover .ui-icon-custom-arrow-down

Buttons - Focus / Active

 
/* Custom Icons Buttons - Focus /  Active */ 
.ui-state-focus .ui-icon-custom-gear, .ui-state-active .ui-icon-custom-gear { background-image: url(images/process_info.png); }  
.ui-state-focus .ui-icon-custom-gear-2, .ui-state-active .ui-icon-custom-gear-2 { background-image: url(images/process_accept.png); }  
.ui-state-focus .ui-icon-custom-arrow-down, .ui-state-active .ui-icon-custom-arrow-down { background-image: url(images/blue_arrow_down.png); }

New UI classes have been created so that the custom icons can be added:

.ui-state-focus .ui-icon-custom-gear
.ui-state-active .ui-icon-custom-gear
.ui-state-focus .ui-icon-custom-gear-2
.ui-state-active .ui-icon-custom-gear-2
.ui-state-focus .ui-icon-custom-arrow-down
.ui-state-active .ui-icon-custom-arrow-down

There are five buttons displayed in Demo 7 in the source files, however some of the buttons use the same classes. Each new class displays a custom icon on the button to which it has been applied.

Custom CSS Style Sheet Reference - Custom Icons - Datepicker

 
/* Custom Icons Datepicker */ 
.ui-datepicker-prev .ui-icon-circle-triangle-w {background-image: url(images/back_1.png); }  
.ui-datepicker-next .ui-icon-circle-triangle-e {background-image: url(images/next_4.png); }

The datepicker uses the above classes as default. Instead of creating custom classes for the datepicker, the original UI classes are being used and the icon image has been changed.

In the /* positioning */ section of the Icons section of the jQuery UI CSS stylesheet, two lines of code were commented out:

 
/*.ui-icon-circle-triangle-e { background-position: -48px -192px; } Commented out, using custom icons */ 
/*.ui-icon-circle-triangle-w { background-position: -80px -192px; } Commented out, using custom icons */

These lines were commented out so that custom icons could be used on the datepicker widget. The datepicker uses these two icon classes by default. Since custom icons are being used instead of the CSS image sprite, these lines need to be removed.

Custom CSS Style Sheet Reference - Custom Icons - Highlight / Error

 
/* Custom Icons Highlight / Error */ 
.ui-state-highlight .ui-icon-custom-info {background-image: url(images/info.png); }  
.ui-state-error .ui-icon-custom-alert, .ui-state-error-text .ui-icon-custom-alert {background-image: url(images/warning.png); }

To display custom icons for the Highlight and Error these new UI classes have been created:

.ui-state-highlight .ui-icon-custom-info
.ui-state-error .ui-icon-custom-alert
.ui-state-error-text .ui-icon-custom-alert

Custom CSS Style Sheet Reference - Custom Icons - Dialog Button

 
/* Custom Dialog Button */ 
.ui-state-default .ui-icon-custom-newwin { background-image: url(images/windows.png); }  
.ui-state-hover .ui-icon-custom-newwin, .ui-state-focus .ui-icon-custom-newwin, .ui-state-active .ui-icon-custom-newwin { background-image: url(images/window_info.png); }

Custom UI classes have been created for the different states for the dialog button:

.ui-state-default .ui-icon-custom-newwin
.ui-state-hover .ui-icon-custom-newwin
.ui-state-focus .ui-icon-custom-newwin
.ui-state-active .ui-icon-custom-newwin

Links to jQuery / jQuery UI Website

Conclusion

The goal of this tutorial is to show web developers new to jQuery UI and the jQuery UI CSS Framework how to theme jQuery UI widgets and write custom CSS so that they can make their own jQuery UI themes.

I hope that this tutorial has helped you be able to integrate jQuery UI into your custom web designs! If you have any questions, please submit them using the comment submit form.

Credits

The custom icons used in the tutorial demos are thanks to Mark James, www.famfamfam.com, DryIcons and Iconza