jQuery UI 1.7.2 Themes List at Google Code
Working with jQuery UI for the first time and looking for a theme? Tired of using the same theme over and over again? Google hosts a number of pre-constructed jQuery UI themes on their Google Code repository. I have always used the same handful of themes with every jQuery UI project I have done. Today, I had a project that didn’t really fit with any of my established themes and didn’t feel like going through the process of construction my own. I always use the Google Code repository when accessing common libraries and I know they have a number of themes stored and available for use, however, this list was quite difficult to find. For some reason Google search was unable to find this list of themes, also at Google.
To make life easier on the rest of you, I have compiled a complete list of themes for jQuery UI 1.7.2 below. I have not tested all of these in a live environment but they are all available in the SVN repository.
jQuery UI Themes:
Base:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />Black Tie
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css" />Blitzer
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" />Cupertino
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />Dark Hive
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" type="text/css" />Dot Luv
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" type="text/css" />Eggplant
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" type="text/css" />Excite Bike
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" type="text/css" />Flick
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" type="text/css" />Hot Sneaks
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" />Humanity
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" type="text/css" />Le Frog
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" type="text/css" />Mint Chocolate
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" type="text/css" />Overcast
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" type="text/css" />Peper Grinder
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" type="text/css" />Redmond
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />Smoothness
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />South Street
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" type="text/css" />Start
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" />Sunny
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />Swanky Purse
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />Trontastic
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" type="text/css" />UI Darkness
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />UI Lightness
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" />Vader
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" type="text/css" />If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Do you know if you can get the css via http://www.google.com/jsapi?autoload=...
@Huy: Google hosts those, too, eg. http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/images/ui-bg_highlight-hard_55_555555_1x100.png
Thank you kindly Ryan.
I was able to get a theme instantiated right away using these links. I had been burrowing around in various step-by-step scenarios before; you saved me time and effort.
Regards,
Alan
Huy, I believe that the images are hosted on google as well in an images directory where the css file is sitting
eg.
I’d like to use the jquery ui images as hosted on Google (because I am including the js library and css in a WIX program, and don’t have the option of placing a css file on the Wix server).
Since I don’t see the css file until it is loaded at runtime, I can’t modify it to reference the Google hosted image files. Any idea on how to specify a “pathname” that will cause jquery UI to look for its image files in the image subdirectory of the file on the Google CDN from which it pulled the js?
Hi,
Its very nice themse. Can I download these CSS! Because I would like to use these themes in an intranet environment.
Mohan
Nice list, what about the images that come with these themes? It seems like they are linked locally. Maybe Google should host those images as well.