PacktLib: jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Themeable User Interfaces

What is a theme?

What are widgets?

Styling user interfaces

Time for action - creating a style

Theme basics

Time for action - grouping styles

Time for action - nesting styles

Theme layout

Time for action - placing elements on the page

jQuery UI themes

Summary

Using Themes

Downloading jQuery UI

Time for action - building a download

Time for action - removing downloaded components

Theme structure

Using jQuery UI

Time for action - using widgets

Switching themes

Time for action – exploring the theme switcher widget

Time for action - themeroller dev tool

Other frameworks

Summary

Using the ThemeRoller

ThemeRoller basics

ThemeRoller gallery

Time for action - previewing a theme

Time for action - downloading a theme

Themes from scratch

Time for action - setting theme fonts

Time for action - changing the corner radius

Time for action - setting theme headers

Time for action - setting widget content styles

Time for action - setting default state styles

Time for action - setting hover state styles

Time for action - setting active state styles

Time for action - changing the highlight cue

Time for action - changing the error cue

Time for action - dialog overlays

Time for action - defining shadows

Changing existing themes

Time for action - adjusting a theme

Summary

Working with Widget Containers

What are widget containers?

Containers and widgets

The ui-widget class

Time for action - preparing the example

Time for action - changing widget fonts

Time for action - scaling down font size

Time for action - changing widget form fields

The ui-widget-content class

Time for action - styling content borders

Time for action - border sides

Time for action - changing link colors

The ui-widget-header class

Time for action - Styling header borders

Time for action - border sides

Time for action - header links

Summary

Transforming Interaction States

What are interaction states?

Time for action - preparing the example

The default state

Time for action - default container selectors

Time for action - default link selectors

Time for action - default border styles

Time for action - default font styles

Time for action - default background styles

The hover state

Time for action - hover container selectors

Time for action - separating the hover and focus states

Time for action - hover font styles

The active state

Time for action - active container selectors

Time for action - active background styles

Summary

Customizing Interaction Cues

What are interaction cues?

Time for action - preparing the example

The highlight state

Time for action - highlight message borders

Time for action - highlight button borders

Time for action - highlight message background

Time for action - highlight date-picker background

Time for action - highlight message font

Time for action - highlight tabs font

The error state

Time for action - error message borders

Time for action - error tabs border

Time for action - error message background

Time for action - accordion error background

Time for action - error message font

Time for action - error button font

The disabled state

Time for action - increasing disabled opacity

Priorities

Time for action - button priorities

Summary

Creating Theme Icons

What are theme icons?

Time for action - preparing the example

Icons in widgets

Time for action - default widget icons

Time for action - setting widget icons

Standalone icons

Time for action - displaying the current user

Time for action - identifying entities

Icon states

Time for action - default icons

Time for action - highlight icons

Time for action - error icons

Time for action - hover icons

Sprites

Theme icon sets

Time for action - creating new icons

Summary

Special Effects

Setting up a jQuery environment

Theme corners

Time for action - setting all corners

Time for action - setting top corners

Time for action - setting individual corners

Time for action - increasing corner roundness

Time for action - complex radius values

Time for action - using percentages

Time for action - removing corners

Theme shadows

Time for action - applying shadows

Time for action - altering shadows

Time for action - changing perspectives

Theme overlays

Time for action - adjusting dialog overlays

Summary

Theming Custom Widgets

What are custom widgets?

Implementing widgets

Time for action – basic markup

Time for action – basic JavaScript

Time for action – adding more behavior

Styling widgets

Time for action – widget CSS

Time for action – theme CSS

Time for action – finishing touches

Summary

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Index