A jQuery UI Theme for SharePoint 2007

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).

The Theme

With that in mind, follow this link to check out my SharePoint 2007 jQuery UI theme! If you want to use it, just click the “Download Theme” button.

Note: This isn’t a perfect match with the default SharePoint 2007 design, but it’s pretty darn close. I sampled the exact colors for most of the elements used, but I had to make some adjustments. Here’s a walkthrough of the settings and why I chose them:

Font Settings

I went with Tahoma instead of Verdana or Arial, mainly because most of the web parts in SharePoint use Tahoma (web part titles and several other elements use Verdana).

I left the weight at normal instead of bold because most button and menu elements aren’t bolded. The current/selected top navigation link has bold text, so you could add some additional CSS to the jQuery UI theme that bolds text for active elements, but ThemeRoller doesn’t support that so I didn’t worry about it.

The font size is 8pt to match the font size used in most web parts.

Corner Radius

SharePoint 2007 doesn’t use rounded corners (how un-web 2.0 of them!), so I set the border-radius to 0.

Header/Toolbar

For this I matched the .ms-toolbar class (the standard toolbar used at the top of list forms). It has a smooth gradient background with a slightly darker border, and the text uses the standard link color (although there is a .ms-description class within it that uses a shade of gray for the “indicates a required field” text). I debated setting the icon color to the link color, but decided that it would look better as a shade of gray, so I used the color from the .ms-description class.

Content

This was the easiest part of the theme. The background color is white, with no background texture. The border uses the default web part border color. The text is black, and the icons again use the shade of gray used by the .ms-description class.

Clickable: default state

I tried to match this to the default top navigation menu. It has a “glass” background texture at 100% opacity/intensity and uses the same background, border, and text colors as the .ms-topnav class in SharePoint. I debated once again using the color from the .ms-description class for icons, but I decided to use the same color as the text this time.

Clickable: hover state

For this I tried to match the top navigation menu when hovering over it. The background texture is again glass at 100% opacity/intensity, and the background, border, and text colors are taken from the .ms-topNavHover class. The icons use the gray color from .ms-description because I thought black was a bit too intense.

Clickable: active state

This was the trickiest part to theme, because the current/selected top nav element in SharePoint has a smooth dark blue gradient in the bottom half and a “glassy” background texture in the top half. The default state and hover state of the top navigation elements are similar in appearance, but the gradient is not as prominent and so we can get away with using the jQuery UI’s glass texture for a very similar look/feel.

I made the decision to maintain consistency with the other states and keep the glass background texture, but I reduced the opacity/intensity to 75% and called it good enough. The other colors are taken from the .ms-topnavselected class. I used the gray color for the icons again. I welcome any suggestions for changing this, so please leave me a comment below!

Highlight

For the highlight, I used the background, border, and text colors from the .ms-informationbar class. This is used at the top of list forms for lists that require content approval. I struggled a bit with the icon color because I wanted to match the “!” icon that SharePoint displays on the left side of the information bar. Unfortunately this icon has some subtle shading to give it a 3-dimensional appearance. I sort of split the difference between the various shades of red and came up with something that’s fairly close.

Error

I went with pure red for the border, text, and icon colors (the same color used in the .ms-validation class), but I couldn’t find an example of a red background color for error messages or warnings. Rather than go with another, non-reddish color, I kept the light shade of red from the ThemeRoller default.

Modal Screen for Overlays

Although they’re prominent in SharePoint 2010, the 2007 version of SharePoint doesn’t use modal windows (instead opting for the pop-up window, ugh). Without having any kind of precedent, I went with my personal preference, which is to have a pure black overlay at 50% opacity with no background texture.

Drop Shadows

Again there is no precedence for this, so I simply removed the drop shadow by setting the thickness, offsets, and corners to “0.” I also set the opacity to 100% so that the browser doesn’t have to do any kind of transparency rendering in the background (I don’t know if it would or not, but this way I know it won’t). Every little bit of optimization helps!

Theme Preview

So there you have it! Here’s a screenshot of a standard SharePoint 2007 page with several jQuery UI widgets so you can see how nicely they blend with the rest of the page.

As I mentioned before, if enough people find this useful I may work on a SharePoint 2010 theme or provide some custom CSS enhancements/fixes to help this theme match SharePoint 2007 even more closely (perhaps by using SharePoint’s built-in background images for some elements the way Easy Tabs does, and there are a few layout bugs due to quirks mode in IE). With some simple color changes, jQuery UI could match any of the OOTB themes for SharePoint 2007. Please leave a comment or send me a message (via Twitter, Google+, etc.) and let me know if this is useful or if you have any suggestions for improvement!