How to View and Access Predefined CSS3 ThemeRoller Themes - dummies

How to View and Access Predefined CSS3 ThemeRoller Themes

By John Paul Mueller

To see the list of predefined CSS3 themes, select the Gallery tab of the ThemeRoller menu shown. You see a listing of the themes by name. Notice that each theme entry includes a snapshot of the theme, the theme name, and two buttons for downloading or editing the theme as needed.

There are currently 24 predefined themes from which to choose (although the screenshot shows only two of the 24 possibilities).


The iconic view of the theme only gives you a taste of how it will appear onscreen. If you really want to see the theme fully, select it by clicking its entry in the list. When you do so, the page changes so that you can see how the theme affects the overall appearance of the page.

In some cases, you find that the iconic view of a theme is misleading. For example, look at the Le Frog (green) theme in the Gallery list. The icon would lead you to believe that everything about this theme is green. However, only the widgets are affected by this choice.


After you find the predefined theme that best matches your requirements, you can add it to your application. The easiest way to perform this task is to use the quick access URLs. You see a sample of them at the bottom of the ThemeRoller page.


The only problem is that the URL for the themes doesn’t change — it always shows the URL for the Smoothness theme. In order to use a theme in your application, you must have the correct URL for it, and the URL isn’t available on the ThemeRoller website.

The following list presents the theme names followed by the requisite URL for that theme when using jQuery UI 1.10 — you add this URL to your code in order to use that theme in your application.

  • UI lightness –

  • UI darkness –

  • Smoothness –

  • Start –

  • Redmond –

  • Sunny –

  • Overcast –

  • Le Frog –

  • Flick –

  • Pepper Grinder –

  • Eggplant –

  • Dark Hive –

  • Cupertino –

  • South Street –

  • Blitzer –

  • Humanity –

  • Hot Sneaks –

  • Excite Bike –

  • Vader –

  • Dot Luv –

  • Mint Choc –

  • Black Tie –

  • Trontastic –

  • Swanky Purse –

  • The basic way for declaring a theme in your application works for every predefined theme that ThemeRoller provides. All you need to do is add the following code to your style sheet. Just replace the theme URL in the following code with URL for the theme you want to use.

     href="" />