jQuery UI Themes Beginner's Guide
- 7-day free trial Subscribe Access now
- $23.99 eBook Buy
-
Advance your knowledge in tech with a Packt subscription
- Instant online access to over 7,500+ books and videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Themeable User Interfaces
-
Using Themes
- 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
- 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
- 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
- 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
- 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
- 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
- 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
About this book
Web applications today generally use at least some JavaScript to enhance the look and feel of the user interface. The jQuery UI toolkit gives web developers a set of widgets as well as a framework for developing and applying themes.
jQuery UI Themes: Beginner's Guide is for web developers who want to design professional-looking applications that are resilient to change. It is a step-by-step guide that goes beyond showing how to switch themes in a user interface built with jQuery UI and offers developers a practical guide to designing their own themes and gives them insight as to how themes work.
jQuery UI Themes Beginner's Guide starts with themes in general and why they're important in web applications today. We gradually move forward, covering jQuery UI basics, eventually aiming for a full understanding of the theme framework. The ThemeRoller application is a powerful tool – allowing developers to easily adjust theme settings. In addition to seeing how the ThemeRoller works, we take a more in-depth look at the CSS framework internals allowing readers to develop the ability to adjust themes in ways the ThemeRoller cannot. This includes everything from special effects to theming custom widgets. There is no limit to what your theme can change.
Once you've read this book, you'll no only be well-versed in theming jargon, you'll also be able to take one look at any jQuery UI application and understand why and how it looks the way it does.
- Publication date:
- July 2011
- Publisher
- Packt
- Pages
- 268
- ISBN
- 9781849510448