I’ve been using jQuery UI in a few recent projects on my department’s SharePoint® site. In order to provide a consistent user experience, I used the excellent ThemeRoller to create a custom theme that matched our branding. We have a custom master page, custom page layouts, and our own color scheme, fonts, etc. so I wasn’t trying to match the OOTB look and feel of SharePoint.
However, it recently occurred to me that although I’ve seen a few articles about people using jQuery UI to enhance SharePoint, they usually go with a pre-built theme that doesn’t quite blend with the rest of SharePoint. With that in mind, I decided to see how closely I could match the default SharePoint look and feel using ThemeRoller. I’m limiting this to just SharePoint 2007 for now, although I may do a follow-up for 2010 if enough people find this useful.
What if I don’t like the default look of SharePoint?
First, let me say that although I don’t think SharePoint looks terrible (although many would disagree with me on that!), it does look pretty dated. However, I would rather have a SharePoint site look consistently dated than have a cool-looking, modern tab widget in the middle of a SharePoint page; it would stick out and break the flow of the page design.
There is an argument to this of course—you might want your widget(s) to stick out so that users are drawn to them and don’t lose track of what they’re doing in a complex web application. I recognize the potential value in that. However, if that were the case for me, I’d still want the theme to blend, but I’d probably do something like reverse the primary and accent colors or find a complementary color scheme to use.
Second, I’m not criticizing anyone’s efforts in using jQuery UI without a custom theme. The functionality is the important thing. In fact, I’d encourage anyone using jQuery UI to get things working first and worry about a custom theme as the last step. The great thing about jQuery UI is that it’s set up to be themed by simply swapping out a CSS file and a few images. You won’t need to make any edits to your HTML or JavaScript/jQuery to use a custom theme at a later date (although if you’ve done some additional customization to jQuery UI, you may need to tweak a few things). (more…)