jQuery UI and ThemeRoller - Digital Art and Design

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.