logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

jQuery UI and ThemeRoller


If you want an easy and quick way to design the user interface for a website or web application and also include jQuery, check out jQuery UI. There you will find a turnkey CSS and jQuery functions combo package that makes adding these features to your new project a snap.

Let's take a walk through the site. Under the Demos and Docs link you will find a list of the jQuery interactive plugins such as drag and drop, tabs and transitions. For each plugin there is a demo, documentation and sample cut-and-paste code for testing.

If you want to grab the turnkey files, click on the Themes link for the jQuery ThemeRoller. The default css is a bare bones white and gray theme. You can click the download button and use as is but there is also a Gallery of colorful themes to get you started. In the Gallery area there are several theme thumbnails. Just click on the one you like. You can download that theme as is by clicking the Roll Your Own tab and then the Download Theme button. But the fun begins when you start to tweet the theme with the ThemeRoller engine. There are 11 options that you can customize. Most options will allow you to change the background texture and color, border color and text and icon colors.

You have several options for tweeting the theme.

  • Font Settings: You can change the font family, weight and size.

  • Corner Radius: You can change the corner radius. Each theme has a default rounded tab style but here you can change the size of the corner or set it to zero for a square tab. (The tabs are built on CSS3, which is not supported by IE at this time.)

  • Header/Toolbar: You can set the color values for the area behind the tabs and the header areas such as for the calendar plugin.

  • Content: Here you can set the colors for the main content area. You can get a very different design depending your choice of border or no border.

  • Clickable Default State: This controls the default (inactive) appearance of the tabs and buttons.

  • Clickable Hover State: These controls are for the appearance of the tabs and buttons in the hover state.

  • Clickable Active State: Controls the appearance of the tab and button for the active page.

  • Highlight: The background, border, text and icon colors for highlighted areas.

  • Error: Background, border, text and icon colors for error messages.

  • Modal Screen for Overlays: Controls background color and texture.

  • Drop Shadows: Controls for the shadow opacity, thickness, offset and corners for a drop shadow effect.

When you download the jquery-ui-x.x.xx.custom.zip and upzip the package, you will see three folders (css, development-bundle, and js) and an index.html file. The index.html file is a demo for the plugins styled with your theme. You will want to put the css and js folders in your main directory and copy/paste the code from the index.html file into the code for your site at the location where you want the plugins to appear.

http://jqueryui.com
http://jqueryui.com/demos/
http://jqueryui.com/themeroller/



Join us in the Digital Art and Design forum.

Add jQuery+UI+and+ThemeRoller to Twitter Add jQuery+UI+and+ThemeRoller to Facebook Add jQuery+UI+and+ThemeRoller to MySpace Add jQuery+UI+and+ThemeRoller to Del.icio.us Digg jQuery+UI+and+ThemeRoller Add jQuery+UI+and+ThemeRoller to Yahoo My Web Add jQuery+UI+and+ThemeRoller to Google Bookmarks Add jQuery+UI+and+ThemeRoller to Stumbleupon Add jQuery+UI+and+ThemeRoller to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Paper Bead SVG Cut Files

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor