Create new themes for your JQuery site with this step-by-step guide
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.
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:
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:
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:
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:
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:
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.
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.
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:
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:
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…