Back to Library

Themes maybe

Both can be generated or modified by the jQuery UI ThemeRoller tool.

<link type="text/css" rel="stylesheet" href="" />
<link rel="stylesheet"
type="text/css" media="all" />
<link rel="stylesheet" href=""
type="text/css" media="all" />
<script type="text/javascript" src=""></script>
<script src=""
<script src=""

Themed Controls

<!-- In the headers -->
//Set theme roller 
    $(document).ready(function () {
//Show date time picker control
    $(function () {
//Show Dialog
    $(function () {
//Progress Bar
    $(function () {
            value: 50

In the body of the code:


<p>Date: <input id="datepicker" type="text" /></p>

Floating dialog box:

<div id="dialog" title="Basic dialog">
    This is a Demo Dialog box using JQuery!!<br />
    Change theme to see this Dialog in different theme.

Progress bar:

<div id="progressbar" style="width:200px;"></div>

Themed Tabs


<div id=”tabs”> 
  <li><a href="#tabs-1">First</a></li> 
  <li><a href="#tabs-2">Second</a></li> 
  <li><a href="#tabs-3">Third</a></li> 
 <div id="tabs-1">Lorem ipsum dolor.</div> 
 <div id="tabs-2">Lorem ipsum dolor.</div> 
 <div id="tabs-3">Lorem ipsum dolor.</div> 

Theme-ing the whole Page/Container

  <div id="container" class="ui-widget ui-widget-content">
    <div id="pagetop" class="ui-widget-header"></div>
    <div id="navigation"></div> 
    <div id="content"></div>

With possibly the following additional css:

 .ui-widget h1, .ui-widget h2, .ui-widget h3, .ui-widget h4 {      color: inherit; font-family: inherit; }
 /*  ThemeRoller opacity makes reading disabled controls VERY difficult  */
 textarea.ui-state-disabled, input.ui-state-disabled { opacity:1 !important; filter:Alpha(Opacity=100) !important; }

See also: The full list of jQuery-UI classes at

Dynamic Themes

The Optional Theme Swticher Tools

Inside of the body place:

<script type="text/javascript"
<div id="ThemeRoller"></div>
javascript_styling_with_theme_roller.txt · Last modified: 2010/10/26 05:48 by root
RSS - 200 © CrosswireDigitialMedia Ltd