jQuery UI Themes Beginner’s Guide
Create new themes for your JQuery site with this step-by-step guide
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:
- Continuing with our theme design, expand the Clickable: default state section.
- In the Background color & texture section, click on the texture selector in the
middle. Select the inset hard texture. - In the Background color & texture section, set the background opacity to 65%.
- Change the Border color setting value to #b0b0b0.
- 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:
- Continuing with our theme design, expand the Clickable: hover state section.
- In the Background color & texture section, click on the texture selector in the
middle. Select the inset hard texture. - Change the Border color setting value to #787878.
- 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:
- Continuing with our theme design, expand the Clickable: active state section.
- In the Background color & texture section, change the color setting value on the left
to #f9f9f9. - In the Background color & texture section, click the texture selector in the middle.
Select the flat texture. - In the Background color & texture section, set the opacity setting value on the
right-hand side to 100%. - Change the Border color setting value to #808080.
- 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:
- Continuing with our theme design, expand the Highlight section.
- In the Background color & texture section, change the color setting value to
#faf2c7. - In the Background color & texture section, change the opacity setting value to 85%.
- Change the Border color setting value to #f8df49.
- 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:
