jQuery UI and ThemeRoller
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.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2019 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.