jQuery UI themeroller is a great utility to design your own jQuery UI theme. It allows you to customize the look and feel of the theme completely. The themeroller page can be found at http://jqueryui.com/themeroller/. On opening this page, you will find a box on the left-hand side with three tabs. The first tab is called Roll Your Own, the second tab is Gallery, which has 24 prebuilt themes available, and the third tab is Help. We are going to look at the first tab and its different options to customize the theme. Here is how the first tab looks:
Changing any value in this left-hand side box instantly changes the look of the elements on the page, so you can see how the theme is going to look.
Let's look at the different options available to customize the theme:
Global styles: The following are the global styles that can be applied:
Font settings: These settings specify the global font name and the font size. If you are planning to use a custom font (for example, the Google font), just type the name here and load the font separately.
Corner radius: This is the border radius width for all elements. Its default value is 4 px.
Generic: The Header/Toolbar, Content, various Clickable states, Highlight, and Error have common fields that are as follows:
Background color and texture: You can specify a hex code for a color or select a color from the palette. The texture value is provided as a percentage.
Border, text, and icon colors: As the name suggests, you have to provide color codes for the border color, text color, and the color of the icon.
Others: We have a few more options to customize our theme:
Modal screens: For modal overlays, you can specify the background color and texture. For the overlay, you can also specify its opacity.
Shadows: For drop shadows on overlays, you can specify the background color and texture. Besides this, there are also options to specify the shadow thickness and offset.
Once you are done with setting all the options and are satisfied with the live preview of the theme, just click the Download Theme button at the top and your customized theme will be ready to download to your machine.