So How Does It Work?

Along with the CSS for jQuery's component set, ThemeRoller generates a block of classes that can be used to style ANY web application component, even components that don't use javascript at all! The following demo components are built using ThemeRoller's component classes. These classes follow the look and feel of any theme you create and even include many assets that jQuery UI's components don't use.

Example: A ThemeRoller-Ready Button

The button above uses these ThemeRoller classes, almost exclusively, for its appearance. To make the button ThemeRoller-Ready, we assigned it a class of ui-default-state, and on mouseover we added the class ui-hover-state. That alone makes it ready to accept ThemeRoller styles! From there we simply imported a ThemeRoller-generated stylesheet and added 2 styles for some padding and a hand cursor.

HTML:

<button type="submit" class="ui-default-state" name="submit">Submit Button</button>

CSS:

@import('jquery-ui-themeroller.smoothness.css'); /*ThemeRoller CSS*/
.ui-default-state { padding: .5em 1em; cursor: pointer; }

jQuery:

$('.ui-default-state').hover(
   function(){$(this).addClass('ui-hover-state');}, 
   function(){$(this).removeClass('ui-hover-state');}
);

More ThemeRoller-Ready Components

The following components use ThemeRoller classes in a similar fashion to the button above.

Button Bar

HTML:

<ul id="buttonBar" class="ui-reset ui-clearfix ui-component ui-hover-state">
	<li><a href="#" class="ui-default-state">Nav Item</a></li>
	<li><a href="#" class="ui-default-state">Nav Item</a></li>
	<li><a href="#" class="ui-default-state">Nav Item</a></li>
	<li><a href="#" class="ui-default-state">Nav Item</a></li>
</ul>

CSS:

@import('jquery-ui-themeroller.smoothness.css'); /*ThemeRoller CSS*/
.ui-default-state { padding: .5em 1em; cursor: pointer; }
#buttonBar { background-image: none; padding: 0; }
#buttonBar li, #buttonBar li a { float: left; margin: 0; padding: 0; list-style: none; text-decoration: none; }
#buttonBar li a  { padding: .5em 1em; border-width: 0; margin: 1px; text-decoration: none; display: block; }

Jump Menu

HTML:

<div id="jumpMenu" class="ui-component">
	<a href="#menu" id="trigger"class="ui-default-state"><span class="ui-arrow-down-default">Menu</span></a>
	<div id="menuContain">
		<ul id="menu" class="ui-active-state">
			<li><a href="#">Nav Item</a></li>
			<li><a href="#">Nav Item</a></li>
			<li><a href="#">Nav Item</a></li>
			<li><a href="#">Nav Item</a></li>
		</ul>
	</div>
</div>

CSS:

@import('jquery-ui-themeroller.smoothness.css'); /*ThemeRoller CSS*/
.ui-default-state { padding: .5em 1em; cursor: pointer; }
#trigger { text-decoration: none; display: block; width: 4em; position: relative; z-index: 2; }
#trigger span { padding-right: 1.3em; background-position: right 50%; margin-right: 3px; }
#trigger.ui-active-state { border-bottom: 0; }
#menuContain { position: relative; z-index: 1; }
#menu { position: absolute; width: 15em; background-image: none; padding: 0; list-style: none; margin: 0; top: -1px; }
#menu li a  { padding: .5em 1em; border: 0; text-decoration: none; display: block; cursor: pointer; }

Think of it as a CSS Component Framework

The additional styles generated by ThemeRoller can be thought of as an API to the themes it generates. The following table lists the ThemeRoller classes, their intended purposes, and what they look like.

ThemeRoller Class Documentation

Change Theme Below

Class	Description	Appearance
.ui-component	Component container element class. Sets font family and size..	abc
Content
.ui-component-content	For content areas and menus in UI components.	abc
.ui-component-content a	For links within content areas.	abc
States
.ui-default-state	Default state for clickable items, title bars, etc.
.ui-hover-state	Hover state for clickable items, title bars, etc.
.ui-active-state	Active state for clickable items, title bars, etc.
Icons
.ui-arrow-right-default	Right arrow icon default state.
.ui-arrow-right-hover	Right arrow icon hover state.
.ui-arrow-right-active	Right arrow icon active state.
.ui-arrow-left-default	Left arrow icon default state.
.ui-arrow-left-hover	Left arrow icon hover state.
.ui-arrow-left-active	Left arrow icon active state.
.ui-arrow-down-default	Down arrow icon default state.
.ui-arrow-down-hover	Down arrow icon hover state.
.ui-arrow-down-active	Down arrow icon active state.
.ui-arrow-up-default	Up arrow icon default state.
.ui-arrow-up-hover	Up arrow icon hover state.
.ui-arrow-up-active	Up arrow icon active state.
.ui-arrow-up-default	Up arrow icon default state.
.ui-arrow-up-hover	Up arrow icon hover state.
.ui-arrow-up-active	Up arrow icon active state.
.ui-arrows-leftright-default	Left-Right Arrows icon default state
.ui-arrows-leftright-hover	Left-Right Arrows icon hover state
.ui-arrows-leftright-active	Left-Right Arrows icon active state
.ui-arrows-updown-default	Up-Down Arrows icon default state
.ui-arrows-updown-hover	Up-Down Arrows icon hover state
.ui-arrows-updown-active	Up-Down Arrows icon active state
.ui-close-default	Close icon default state
.ui-close-hover	Close icon hover state
.ui-close-active	Close icon active state
.ui-folder-closed-default	Folder closed icon default state
.ui-folder-closed-hover	Folder closed icon hover state
.ui-folder-closed-active	Folder closed icon active state
.ui-folder-open-default	Folder open icon default state
.ui-folder-open-hover	Folder open icon hover state
.ui-folder-open-active	Folder open icon active state
.ui-doc-default	Document icon default state
.ui-doc-hover	Document icon hover state
.ui-doc-active	Document icon active state
.ui-minus-default	Minus icon default state
.ui-minus-hover	Minus icon hover state
.ui-minus-active	Minus icon active state
.ui-plus-default	Plus icon default state
.ui-plus-hover	Plus icon hover state
.ui-plus-active	Plus icon active state
Helper Classes
.ui-hidden	Hidden elements	n/a
.ui-accessible-hidden	Accessible version of hidden elements	n/a
.ui-reset	Reset styles	n/a
.ui-clearfix	Clearfix styles	n/a

ThemeRoller-Ready Coding Pointers

This system is new to us as well, but in the short time we've experimented with it, we've come across some interesting and useful tips to share. Here are some handy tidbits to consider.

ThemeRoller Javascript Tips

Setting Global Hover States

If you noticed, the jQuery behind our button example contains a selector for the '.ui-default-state' class. It finds elements with this class and adds the ThemeRoller hover class on mouseover, and removes it on mouseout. This is particularly handy because it talks to every element with that class, essentially driving all of your ThemeRoller-Ready element states in one command. However, be careful to scope it appropriately to prevent ThemeRoller-classed elements that should not have a hover state, such as a title bar in a modal box.

ThemeRoller CSS Tips

Keep Your Styles as Structural as Possible

This means leaving all colors, font info, and backgrounds out of your custom styles. Anything that can be styled should receive ThemeRoller theme styles.

Try to Make Visual Connections

It's common for ThemeRoller themes to have identical Active and Content states. When this occurs, components like tabs and the jumpmenu above can make smooth connections between clickable elements and their content areas. To do this, try overriding your active state class by setting its bottom border width to 0. Then, with a negative bottom value (bottom: -1px;), you can pull corresponding content right underneath the clickable element. See our jumpmenu above or jQuery UI's tab control for an example.

Use CSS Overrides

You might have noticed that although we're using the ui-default-state class with the buttons in the button bar, the buttons don't have the border color that comes with that class. In our custom styles, we've overridden the border style and used a margin instead, allowing the bar background to show through as a border on the buttons. We did this to eliminate the thick outlines that would appear when using borders on so many elements.

This border/margin technique isn't very interesting in itself, but we discovered while building it that you can override styles in ways that are less harmful to your component's Theme-ability. Using this border example, we could have simply written border: 0; to achieve our effect. But instead, we used border-width: 0;, which only overrides the border's width while keeping its style and color in memory. This might come in handy later if we decide we'd like one of the buttons to have a right border and would like it to use our theme's color.

There are additional patterns in setting your overrides that will allow you to retain portions of a theme you might need later. For example, you might want to use a certain ThemeRoller class for one of its rules, but then override the others. Generally, it is a good idea to write your override styles with the most specific rule possible. Some examples would be using background-color or background-image rather than background.

Just For Fun... Live Theming!

All 3 of the demo components are shown below so you can see how one css file cascades through all of them and changes their appearance. You can even paste in any ThemeRoller URL in the input below to update the theme to one you've created. Go wild! Note This little demo seems to be quirky in Safari; try in Firefox.

ThemeRoller-Ready Badges!

When you create a ThemeRoller-Ready component, you can post one of these badges with it on your site to show developers that it's compatible with ThemeRoller.

Download all 4 (ZIP 30kb)

Go Give It a Try!

We're really excited at the potential of these ThemeRoller classes. jQuery has an incredible developer community and with plugins constantly being created, it would be incredibly helpful if developers could start making their components ThemeRoller-Ready. We encourage you to try it out and if you have any feedback or questions, please leave us a comment below. Enjoy!