jQuery UI Themes: States, Cues, Overlays and Shadows

Exclusive offer: get 50% off this eBook here
jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide — Save 50%

Create new themes for your JQuery site with this step-by-step guide

$23.99    $12.00
by Adam Boduch | August 2011 | Open Source

In the previous article by Adam Boduch, author of jQuery UI Themes Beginner's Guide, we took a look at the ThemeRoller application. In this article, we shall take a look at:

  • Types of widget state styles
  • Cue and its types
  • Overlays and shadows

 

jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide

Create new themes for your JQuery site with this step-by-step guide

        Read more about this book      

(For more resources on jQuery, see here.)

States

jQueryUi widgets are always in one state or another. These states also play a role in themes.
A widget in one state should look different than widgets in another state. These different
appearances are controlled by CSS style properties within the theme.

States are especially prevalent in widgets that interact with mouse events. When a user
hovers over a widget that is interested in these types of events, the widget changes into a
hover state. When the mouse leaves the widget, it returns to a default state.

Even when nothing is happening with a widget—no events are taking place that the widget is
interested in—the widget is in a default state. The reason we need a default state for widgets
is so that they can return to their default appearance. The appearance of these states is
entirely controlled through the applied theme. In this section, we'll change the ThemeRoller
settings for widget states.

Time for action - setting default state styles

Some widgets that interact with the mouse have a default state applied to them. We can
adjust how this state changes the appearance of the widget using ThemeRoller settings:

  1. Continuing with our theme design, expand the Clickable: default state section.
  2. In the Background color & texture section, click on the texture selector in the
    middle. Select the inset hard texture.
  3. In the Background color & texture section, set the background opacity to 65%.
  4. Change the Border color setting value to #b0b0b0.
  5. Change the Icon color setting value to #555555:


What just happened?

We've just changed the look and feel of the default widget state. We changed the
background texture to match that of the header theme settings. Likewise, we also changed
the background opacity to 65%, also to match the header theme settings. The border color is
now slightly darker - this looks better with the new default state background settings. Finally,
the icon color was updated to match the default state font color.

Here is what the sample button looked like before we made our changes:

Here is what the sample button looks like after we've updated our theme settings:

Time for action - setting hover state styles

The same widgets that may be in a default state, for instance, a button, may also be in a
hover state. Widgets enter a hover state when a user moves the mouse pointer over the
widget. We want our user interface to give some kind of visual indication that the user has
hovered over something they can click. It's time to give our theme some hover state styles:

  1. Continuing with our theme design, expand the Clickable: hover state section.
  2. In the Background color & texture section, click on the texture selector in the
    middle. Select the inset hard texture.
  3. Change the Border color setting value to #787878.
  4. Change the Icon color setting value to #212121:


What just happened?

When we hover over widgets that support the hover state, their appearance is now
harmonized with our theme settings. The background texture was updated to match the
texture of the default state styles. The border color is now slightly darker. This makes the
widget really stand out when the user hovers over it. At the same, it isn't so dark that it
conflicts with the rest of the theme settings. Finally, we updated the icon color to match
that of the font color.

Here is what the sample button widget looked like before we change the hover state settings:

Here is what the sample button widget looked like after we updated the hover state
theme settings:

Time for action - setting active state styles

Some jQuery UI widgets, the same widgets that can be in either a default or hover state, can
also be in an active state. Widgets become active after a user clicks them. For instance, the
currently selected tab in a tabs widget is in an active state. We can control the appearance of
active widgets through the ThemeRoller:

  1. Continuing with our theme design, expand the Clickable: active state section.
  2. In the Background color & texture section, change the color setting value on the left
    to #f9f9f9.
  3. In the Background color & texture section, click the texture selector in the middle.
    Select the flat texture.
  4. In the Background color & texture section, set the opacity setting value on the
    right-hand side to 100%.
  5. Change the Border color setting value to #808080.
  6. Change the Icon color setting value to #212121:


What just happened?

Widgets in the active state will now use our updated theme styles. We've changed the
background color to something only marginally darker. The reason being, we are using the
highlight soft texture in our content theme settings. This means that the color gets lighter
toward the top. The color at the top is what we're aiming for in the active state styles. The
texture has been changed to flat. Flat textures, unlike the others, have no pattern - they're
simply a color. Accordingly, we've changed the background opacity to 100%. We do this
because for these theme settings, we're only interested in showing the color.

The active state border is slightly darker, a visual cue to show that the widget is in fact active.
Finally, like other adjustments we've made in our theme, the icon color now mirrors the
text color.

Here is what the sample tabs widget looked like before we changed the active state
theme settings:

Here is what the sample tabs widget looks like after we've updated the active state
theme settings.

Notice that the selected tab's border stands out among the other tabs and how the selected
tab blends better with the tab content.

Cues

In any web application, it is important to have the ability to notify users of events that have
taken place. Perhaps an order was successfully processed, or a registration field was entered
incorrectly. Both occurrences are worth letting the user know about. These are types of cues.

The jQuery UI theming framework defines two types of cues used to notify the user. These are
highlights and errors. A highlight cue is informational, something that needs to be brought to
the user's attention. An error is something exceptional that should not have happened.

Both cue categories can be customized to meet the requirements of any theme. It is
important to keep in mind that cues are meant to aggressively grab the attention of the
user - not to passively display information. So the theme styles applied to these elements
really stand out. In this section we'll take a look at how to make this happen with the
ThemeRoller.

Time for action - changing the highlight cue

A user of your jQuery UI application has just saved something. How do they know it was
successful? Your application needs to inform them somehow—it needs to highlight the fact
that something interesting just happened. To do this, your application will display a highlight
cue. Let's add some highlight styles to our theme:

  1. Continuing with our theme design, expand the Highlight section.
  2. In the Background color & texture section, change the color setting value to
    #faf2c7.
  3. In the Background color & texture section, change the opacity setting value to 85%.
  4. Change the Border color setting value to #f8df49.
  5. Change the Text color setting value to #212121:


What just happened?

The theme settings for any highlight cues we display for the user have been updated. The
background color is a shade darker and the opacity has been increased by 10%. The border
color is now significantly darker than the background color. The contrast between the
background and border colors defined here are now better aligned with the background-border
contrast defined in other theme sections. Finally, we've updated the text color to be
the same as the text in other sections. This is not for a noticeable difference (there isn't any),
but for consistency reasons.

Here is what the sample highlight cue looked like before we updated the theme settings:

Here is what the sample highlight widget looks like after the theme setting changes:

jQuery UI Themes Beginner's Guide Create new themes for your JQuery site with this step-by-step guide
Published: July 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on jQuery, see here.)

Time for action - changing the error cue

Assume a user of your jQuery UI application has done something wrong, or perhaps the application has failed in one way or another. In both cases, you need to let your user know by displaying an error cue. Let's update our theme's error styles:

  1. Continuing with our theme design, expand the Error section.
  2. In the Background color & texture section, change the background color setting value to #fad8d6.
  3. In the Background color & texture section, change the texture setting value to diagonals small.
  4. In the Background color & texture section, change the opacity setting value to 85%.
  5. Change the Border color setting value to #af0404:

What just happened?

We've changed the appearance of any error messages displayed in a jQuery UI application that is using our theme. First, we updated the background color to be slightly darker. The background texture has been changed to use diagonal lines and the background opacity has been brought down to 85%. The diagonal lines help illustrate that there is a problem for the user. Finally, as with the rest of our custom theme, the border setting was set a shade darker so that it stands out better.

Here is what the error cue looked like before we changed the theme settings:

Here is what the error cue looks like after we changed the theme settings:

Overlays and shadows

There are special theme settings that allow us to specify how overlays used with dialog widgets look and how widgets with shadows look. Both of these themes are nonessential because they're seldom used. The dialog overlay exists mostly to set the opacity level of the user interface when a modal dialog is displayed. Shadows are only used if the developer uses the CSS classes explicitly.

We don't usually need to change these theme settings. The defaults are generally sufficient for basic use. Nonetheless, these sections are in the ThemeRoller application for when you do need them.

Time for action - dialog overlays

When a jQuery UI dialog is displayed, the user is focused on the dialog, not the rest of the user interface. Especially if the dialog is a modal - in which case an overlay is placed over the rest of the browser screen. We can change the way this overlay looks in the ThemeRoller:

  1. Continuing with our theme design, expand the Modal Screen for Overlays section.
  2. In the Background color & texture section, change the texture setting value to diagonals small.
  3. In the Background color & texture section, change the opacity setting value to 50%.
  4. Change the Overlay Opacity setting value to 40%:

What just happened?

The background, behind modal dialogs will now display our theme updated theme changes. Similar to the error cue, we've updated the modal overlay texture to show dashed lines. This helps the user focus in on the dialog being displayed. We set the background opacity 50%, which also helps hide the rest of the user interface while the dialog is displayed. The Overlay Opacity is set to 40%. This is different from the background opacity in that it controls the opacity of the overlay as a whole, not just the background texture.

Here is what the sample dialog overlay looked like before we updated our theme settings:

Here is what the sample dialog overlay looked like after we updated our theme settings:

Time for action - defining shadows

Shadows can give a nice visual appeal to a widget. In fact, they can change the entire perspective of the user interface. This, amongst other shadow settings, can be controlled with the ThemeRoller:

  1. Continuing with our theme design, expand the Drop Shadows section.
  2. Change the Shadow Opacity setting value to 40%.
  3. Change the Shadow Thickness setting value to 4px.
  4. Change the Top Offset setting value to 0px.
  5. Change the Left Offset setting value to 0px:

What just happened?

We've just change the orientation and thickness of shadows defined by our theme styles. We also made the shadow slightly darker by setting the opacity to 40%. The shadow thickness was cut in half by setting it to 4px. We changed the orientation of the shadow by setting the top and left offsets to 0px. This means that the shadow isn't visible to the top or left-hand side of the element it is applied to, only the right-hand side and the bottom.

Here is what the sample shadow looked like before we updated the theme settings:

Here is what the sample shadow looks like after the theme settings are updated:

It looks as though the light is hitting the element from the user's top left-hand side.

Well, there you have it. Your first custom jQuery UI theme built entirely with the ThemeRoller. Here is the really long and ugly URL you can use to experiment with and edit the theme:

http://jqueryui.com/themeroller/#ffDefault=Lucida+Grande%2C+Lucida+Sa ns%2C+Arial%2C+sans-serif&fwDefault=bold&fsDefault=1.1em& cornerRadius=8px&bgColorHeader=cccccc&bgTextureHeader=06_inset _hard.png&bgImgOpacityHeader=65&borderColorHeader=828282&fcHeader=222 222&iconColorHeader=222222&bgColorContent=f5f5f4&bgTexture Content=03_highlight_soft.png&bgImgOpacityContent=75&borderColorConte nt=828282&fcContent=222222&iconColorContent=222222&bgColorDefault= e6e6e6&bgTextureDefault=06_inset_hard.png&bgImgOpacityDefault=65&bord erColorDefault=b0b0b0&fcDefault=555555&iconColorDefault=555555& bgColorHover=dadada&bgTextureHover=06_inset_hard.png&bgImgOpacity Hover=75&borderColorHover=787878&fcHover=212121&iconColorHover=212121 &bgColorActive=f9f9f9&bgTextureActive=01_flat.png&bgImgOpacityActive= 100&borderColorActive=808080&fcActive=212121&iconColorActive=212121& bgColorHighlight=faf2c7&bgTextureHighlight=02_glass.png&bgImgOpacity Highlight=85&borderColorHighlight=f8df49&fcHighlight=212121&iconColor Highlight=2e83ff&bgColorError=fad8d6&bgTextureError=07_diagonals_ small.png&bgImgOpacityError=85&borderColorError=af0404&fcError=cd0a 0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=07_ diagonals_small.png&bgImgOpacityOverlay=50&opacityOverlay=40&bgColorS hadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacity Shadow=40&thicknessShadow=4px&offsetTopShadow=0px&offsetLeftShadow=0p x&cornerRadiusShadow=8px

Have a go hero

The URL we use to save our theme settings allows us to make further changes to our theme later on. Try saving the ThemeRoller URL to a local file and editing it later.

Summary

In this article we saw how to set default state, hover state, and active state styles. We also learnt about changing the highlight cue and the error cue. We also took a look at overlays and shadows.


Further resources on this subject:


jQuery UI Themes Beginner's Guide Create new themes for your JQuery site with this step-by-step guide
Published: July 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Adam Boduch

Adam Boduch has spent the last several years developing user interfaces for large-scale software systems. Starting out as a backend Python developer, he was lured to the frontend by tools like jQuery UI. Adam is passionate about readable code, and writes extensively about jQuery UI widgets, including his previous book jQuery UI Themes Beginner's Guide, Packt Publishing.

When Adam isn't coding, reading or writing, you will usually find him playing hockey, or spending time with his family.

Books From Packt


jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

jQuery Mobile First Look
jQuery Mobile First Look

Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

PHP jQuery Cookbook
PHP jQuery Cookbook

ASP.NET jQuery Cookbook
ASP.NET jQuery Cookbook

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
H
N
g
m
E
U
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software