JQuery UI Themes Beginner's Guide Table of Contents

Table of Contents

Preface
Chapter 1: Themeable User Interfaces
Chapter 2: Using Themes
Chapter 3: Using the ThemeRoller
Chapter 4: Working with Widget Containers
Chapter 5: Transforming Interaction States
Chapter 6: Customizing Interaction Cues
Chapter 7: Creating Theme Icons
Chapter 8: Special Effects
Chapter 9: Theming Custom Widgets
Pop Quiz Answers
Index

• Preface

• Chapter 1: Themeable User Interfaces
• What is a theme?
• Themes in the real world
• Desktop themes
• Themes on the Web
• What are widgets?
• Widget structure
• Widgets and themes
• Styling user interfaces
• Time for action - creating a style
• Style colors
• Style fonts
• Theme basics
• Time for action - grouping styles
• Repetitive style properties
• Group selectors
• Time for action - nesting styles
• Nested selectors
• Nesting depth
• Theme layout
• Time for action - placing elements on the page
• Layout design
• Consistent layout
• jQuery UI themes
• The widget framework
• The CSS framework
• Theme-ready widgets
• Summary

• Chapter 2: Using Themes
• Downloading jQuery UI
• Time for action - building a download
• Minimal downloads
• Time for action - removing downloaded components
• Theme structure
• Development bundle
• File structure
• Class structure
• Using jQuery UI
• Time for action - using widgets
• Widget options
• Widget methods
• Widgets and the DOM
• Widgets and CSS
• Switching themes
• Time for action – exploring the theme switcher widget
• Time for action - themeroller dev tool
• Other frameworks
• Dojo
• Ext JS
• Summary

• Chapter 3: Using the ThemeRoller
• ThemeRoller basics
• Instant feedback
• The dev tool
• Portability
• ThemeRoller gallery
• Viewing themes
• Time for action - previewing a theme
• Downloading themes
• Time for action - downloading a theme
• Themes from scratch
• Fonts
• Time for action - setting theme fonts
• Corners
• Time for action - changing the corner radius
• Headers
• Time for action - setting theme headers
• Content
• Time for action - setting widget content styles
• States
• Time for action - setting default state styles
• Time for action - setting hover state styles
• Time for action - setting active state styles
• Cues
• Time for action - changing the highlight cue
• Time for action - changing the error cue
• Overlays and shadows
• Time for action - dialog overlays
• Time for action - defining shadows
• Changing existing themes
• Selecting a theme
• Time for action - adjusting a theme
• Summary

• Chapter 4: Working with Widget Containers
• What are widget containers?
• Containers and widgets
• The ui-widget class
• Time for action - preparing the example
• Widget fonts
• Time for action - changing widget fonts
• Scaling widget fonts
• Time for action - scaling down font size
• Widget form fields
• Time for action - changing widget form fields
• The ui-widget-content class
• Content borders
• Time for action - styling content borders
• Time for action - border sides
• Content links
• Time for action - changing link colors
• The ui-widget-header class
• Header borders
• Time for action - Styling header borders
• Time for action - border sides
• Header links
• Time for action - header links
• Summary

• Chapter 5: Transforming Interaction States
• What are interaction states?
• Time for action - preparing the example
• The default state
• Default state selectors
• Time for action - default container selectors
• Time for action - default link selectors
• Default state borders
• Time for action - default border styles
• Default state font
• Time for action - default font styles
• Default state background
• Time for action - default background styles
• The hover state
• Hover state selectors
• Time for action - hover container selectors
• Hovering and focusing
• Time for action - separating the hover and focus states
• Hover state font
• Time for action - hover font styles
• The active state
• Active state selectors
• Time for action - active container selectors
• Active state background
• Time for action - active background styles
• Summary

• Chapter 6: Customizing Interaction Cues
• What are interaction cues?
• Time for action - preparing the example
• The highlight state
• Highlight borders
• Time for action - highlight message borders
• Time for action - highlight button borders
• Highlight background
• Time for action - highlight message background
• Time for action - highlight date-picker background
• Highlight font
• Time for action - highlight message font
• Time for action - highlight tabs font
• The error state
• Error borders
• Time for action - error message borders
• Time for action - error tabs border
• Error background
• Time for action - error message background
• Time for action - accordion error background
• Error font
• Time for action - error message font
• Time for action - error button font
• The disabled state
• Disabled opacity
• Time for action - increasing disabled opacity
• Priorities
• Time for action - button priorities
• Summary

• Chapter 7: 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
• What are sprites?
• Icon categories
• Theme icon sets
• Time for action - creating new icons
• Summary

• Chapter 8: Special Effects
• Setting up a jQuery environment
• Theme corners
• The legacy approach
• The style approach
• The jQuery UI approach
• 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

• Chapter 9: Theming Custom Widgets
• What are custom widgets?
• Widget JS
• Widget CSS
• Implementing widgets
• The widget
• Time for action – basic markup
• Goals of the widget
• 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

• Index