g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


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 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.

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 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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 features
Adobe Portfolio First Look by Justin Seeley

Social Media Graphic Templates


Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor