How to Add Themes to Your AJAX Elements for HTML5 and CSS3 Programming - dummies

How to Add Themes to Your AJAX Elements for HTML5 and CSS3 Programming

By Andy Harris

The jQuery theme tool makes it quite easy to decorate your elements through CSS3. The great thing about jQuery themes is that they are semantic; that is, you specify the general purpose of the element and then let the theme apply the appropriate specific CSS. You can use the themeRoller application to easily create new themes or modify existing ones.

Many of the jQuery interface elements automatically use the current CSS theme. Of course, you can also apply them to any of your own elements to get a consistent look.

Themes are simply CSS classes. To apply a CSS theme to an element, you can just add a special class to the object.

For example, you can make a paragraph look like the current definition of the ui-widget by adding this code to it:

<div class = "ui-widget">
My div now looks like a widget

Of course, adding classes into the HTML violates one of the principles of semantic design, so it’s better to do the work in JavaScript with jQuery:

 function themify(){
  //add theme-based CSS to the elements
  .append('<span class = "ui-icon ui-icon-star"></span>');

The themify() function adds all the themes to the elements on the page, applying the pretty jQuery theme to it.

  1. Identify all divs with jQuery.

  2. Add the ui-widget class to all divs.

    This class is defined in the theme. All jQuery themes have this class defined, but the specifics vary by theme. In this way, you can swap out a theme to change the appearance, and the code still works. The ui-widget class defines an element as a widget.

  3. Add ui-widget-content as well.

    The divs need to have two classes attached, so some programmers use chaining to specify that divs should also be members of the class. This ui-widget-content class indicates that the contents of the widget should be styled.

  4. Specify rounded corners.

    Rounded corners have become a standard of the web 2.0 visual design. This effect is extremely easy to achieve with jQuery — just add the ui-corner-all class to any element you want to have rounded corners.

    Rounded corners use CSS3, which is not yet supported by all browsers. Your page will not show rounded corners in older browsers, but the page will still work fine otherwise.

  5. Make all headlines conform to the widget-header style.

    The jQuery themes include a nice headline style. You can easily make all heading tags (H1 to H6) follow this theme. Use the :header filter to identify all headings, and apply the ui-widget-header and ui-corner-all classes to these headers.

The jQuery UI package supports a number of interesting classes.

Class Used On Description
ui-widget Outer container of widget Makes element look like a widget.
ui-widget-header Heading element Applies distinctive heading appearance.
ui-widget-content Widget Applies widget content style to element and children.
ui-state-default Clickable elements Displays standard (unclicked) state.
ui-state-hover Clickable elements Displays hover state.
ui-state-focus Clickable elements Displays focus state when element has keyboard focus.
ui-state-active Clickable elements Displays active state when mouse is clicked on element.
ui-state-highlight Any widget or element Specifies that an element is currently highlighted.
ui-state-error Any widget or element Specifies that an element contains an error or warning
ui-state-error text Text element Allows error highlighting without changing other elements
(mainly used in form validation).
ui-state-disabled Any widget or element Demonstrates that a widget is currently disabled.
ui-corner-all, ui-corner-tl (etc) Any widget or element Adds current corner size to an element. Specify specific
corners with tl, tr, bl, br, top, bottom, left, right.
ui-widget-shadow Any widget Applies shadow effect to a widget.

A few other classes are defined in UI themes, but these are the most commonly used. Refer to the current jQuery UI documentation for more details.

How to add an icon

Note the small start that appears inside the element. This element is an example of a jQuery UI icon. All jQuery themes support a standard set of icons, which are small (16px square) images. The icon set includes standard icons for arrows as well as images commonly used in menus and toolbars.

Some jQuery UI elements use icons automatically, but you can also add them directly. To use an icon in your programs, follow these steps:

  1. Include a jQuery UI theme.

    The icons are part of the theme package. Include the CSS style sheet that corresponds with the theme.

  2. Be sure that the images are accessible.

    When you download a theme package, it includes a directory of images. The images included in this directory are used to create custom backgrounds as well as icons. The CSS file expects a directory called to be in the same directory as the CSS.

    This directory should contain several images that begin with ui-icons. These images contain all the necessary icons. If the icon image files are not available, the icons will not display.

  3. Create a span where you want the icon to appear.

    Place an empty span element wherever you want the icon to appear in the HTML. You can place the span directly in the HTML if you want, or you can add it through jQuery.

  4. Attach the ui-icon class to the span.

    This tells jQuery to treat the span as an icon. The contents of the span will be hidden, and the span will be resized to hold a 16-pixel square icon image.

  5. Attach a second class to identify the specific icon.

    Look at the themeRoller page to see the available icons. When you hover over an icon on this page, you can see the class name associated with the icon.

You can add the code directly in your HTML like this:

<p id = "myPara">
 This is my text
 <span class = "ui-icon ui-icon-star"></span>

Or, you can use jQuery to add the appropriate code to your element:

$("#myPara").append('<span class = "ui-icon ui-icon-star"></span>');