How to Create Color Themes for jQuery UI Widgets with ThemeRoller

Styling multiple user interface (UI) widgets at once and picking pre-determined color combinations can save a significant amount of time and effort on a web development project. jQuery UI is a suite of user interface widgets (e.g. datepickers, tabs), effects and CSS color themes built on top of the jQuery Javascript library.

The grid that lists file records in WebSmart’s Page at a Time(Grid) template, which has been available since version 9.2, is a set of jQuery UI widgets called jqGrid. You can use ThemeRoller, a free and interactive jQuery widget CSS generator, to easily select pre-determined color themes or create your own without writing CSS.

Default Idaho theme Idaho customized with Sunny theme

ThemeRoller provides an interactive form that allows you to instantly see how the theme options you set will affect the colors of widgets. You can use the various theme options to change the color of widget fonts, backgrounds, and borders, as well as mouse events. For example, the ‘Clickable: hover state’ mouse event option on the ThemeRoller form sets the color a widget will change to when your mouse hovers over it.

You can choose from one of the ready-made themes available from the ThemeRoller form’s Gallery tab and use these themes as starting points for creating your own custom theme. Choose a theme, such as ‘Sunny,’ then make your desired changes to it.

Once you make all of your color choices for your new theme, simply click ‘Download theme’ to generate the CSS file. To add this theme to your WebSmart program, place the file in your /websmart/ directory and create a link to it in your program header segment.

Code sample #265 is available on our website and explains how to use ThemeRoller and apply it to the Page at a Time(Grid) template. In example #265, ‘Change the Color Theme of the Page at a Time(Grid) Template,’ I download the ready-made theme ‘Sunny’ and add the following link in my GridContainer segment to apply my theme changes:

<link rel=”stylesheet” href=”/websmart/jQueryThemes/codesampe_jqgrid/css/sunny/jquery-ui-1.8.23.custom.css” type=”text/css” />

Once you get the hang of using this jQueryUI feature, you will see how easy it is to apply color changes to other widgets, such as datepickers, that you may have added to your WebSmart programs.

To learn more about jQuery widgets, visit jQueryUI.com.

ThemeRoller is available to you for free from jQueryUI.com/themeroller.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>