Develop Your Own jQuery “ThemeRoller-Ready” Components
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
01/11/2009 Note: This article is based upon an version of jQuery UI (v1.5.3). The ThemeRoller CSS Framework has now become the jQuery UI CSS Framework. We will be posting an updated article very soon which will detail the process of developing for the new framework classes. For now, please visit the [jQuery UI CSS Framework documentation](https://api.jqueryui.com/category/theming/) to find out about developing components with the new framework.
Earlier
this week we released ThemeRoller, an Ajax-driven theme design app
for jQuery UI. Now that the servers have recovered and things are
running smoothly, we’d like to uncover a bit of an easter egg that we
rolled right into the app: ThemeRoller not only allows you to style
the official jQuery UI components, it also provides handy CSS hooks for
designing your own ThemeRoller-Ready components! This article will
introduce ThemeRoller’s CSS API and show you how to use it in your own
projects.
So How Does It Work?
Permalink to '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
Permalink to '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:
Permalink to 'HTML:'<button type="submit" class="ui-default-state" name="submit">Submit Button</button>
CSS:
Permalink to 'CSS:'@import('jquery-ui-themeroller.smoothness.css'); /*ThemeRoller CSS*/
.ui-default-state { padding: .5em 1em; cursor: pointer; }
jQuery:
Permalink to 'jQuery:'$('.ui-default-state').hover(
function(){$(this).addClass('ui-hover-state');},
function(){$(this).removeClass('ui-hover-state');}
);
More ThemeRoller-Ready Components
Permalink to 'More ThemeRoller-Ready Components'The following components use ThemeRoller classes in a similar fashion to the button above.
Button Bar
Permalink to 'Button Bar'HTML:
Permalink to '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:
Permalink to '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
Permalink to 'Jump Menu'HTML:
Permalink to '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:
Permalink to '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
Permalink to '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.
ThemeRoller-Ready Coding Pointers
Permalink to '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
Permalink to 'ThemeRoller Javascript Tips'Setting Global Hover States
Permalink to '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
Permalink to 'ThemeRoller CSS Tips'Keep Your Styles as Structural as Possible
Permalink to '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
Permalink to '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
Permalink to '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.
ThemeRoller-Ready Badges!
Permalink to '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)
Permalink to 'Download all 4 (ZIP 30kb)'Go Give It a Try!
Permalink to '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. Enjoy!