Importing jQuery UI CSS into Your DotNetNuke Site
Apr
29
Written by:
4/29/2010
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:
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\>
Replace – Respond With: <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script><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:
You clicked the button! Great job!
2 comment(s) so far...
Re: Importing jQuery UI CSS into Your DotNetNuke Site
Hi Will,
Nice write up. No doubts that jQuery & jQueryUI are great additions to any web projects. But there is a problem with the way how you're adding them to your web site - using @import. This is not the best way, I would you simple element in head block since it performs better than @import. The reason is because @import prevents loading stylesheets in parallel . You can find more information about it at www.stevesouders.com/blog/2009/04/09/dont-use-import/ (Steve's Souders blog, web performance guru).
Regards,
Serge
By Serge Barysiuk on
4/30/2010
|
Re: Importing jQuery UI CSS into Your DotNetNuke Site
I don't disagree. I was just trying to give a simple solution. We could dedicate a series of posts to the pros and cons that you've brought up. :) Plus, this is not easily done without a specialized module to make it happen.
By Will on
4/30/2010
|