You might be reading this thinking, “What do you mean?” That’s typical. The real question though is, “What can importing jQuery UI CSS do for me?” jQuery UI on it’s own is already a great thing to use. It gives you all kinds of intuitive, interactive, and usable UI elements with very little work on your part. Think of things like calendars, tabs, sliders, and more. jQuery UI on it’s own only adds the behavior. You have to import the CSS to make it look good, and luckily, there’s a few themes out there pre-made with jQuery UI in mind.
While these themes are pre-made, you can also make your own using the ThemeRoller on the jQuery UI site. However, the themes that are already available are very useful and many can fit into the existing designs of most websites. What makes this even better is that there are services like the Google CDN that will host these CSS themes for you. This can potentially make your pages load faster, and most often, it does.
Here are the URLs to the Google hosted jQuery UI CSS files:
What’s great about the above URL’s is that the version number (1) will resolve the latest version of the CSS file by the Google CDN.
Adding this to your entire site is quite easy. For example, we did this on our ODUG website by performing an import in the Portal.css file, using the Site Settings. Here is an example:
1: @import url(http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css);
Unfortunately, you may have problems trying this with PageBlaster. In that case, I would suggest using a content injection module, or adding the CSS to the skin files. In fact, here’s the replacement I am using with PageBlaster:
Search For: \<title\>
Search For: \<title\>
Using these methods allows us to easily create and format the ODUG Board Members page:
Notice not just the tabs, but the visually sectioned area that describes the board members role. That was done by reusing existing CSS patterns from the Accordion widget in jQuery UI.
This also allows us to create a button out of nearly any mark-up. For an example, see the meeting registration link in the screen shot below:
On my own website, I am importing an entirely different style sheet from the Google CDN. See these live examples here:
This is a Link Button