ms-description because I thought black was a bit too intense. The background texture is again glass at 100% opacity/intensity, and the background, border, and text colors are taken from the. Clickable: hover stateįor this I tried to match the top navigation menu when hovering over it. ms-description class for icons, but I decided to use the same color as the text this time. I debated once again using the color from the. It has a “glass” background texture at 100% opacity/intensity and uses the same background, border, and text colors as the. I tried to match this to the default top navigation menu. The text is black, and the icons again use the shade of gray used by the. The border uses the default web part border color. The background color is white, with no background texture. ms-toolbar colors were used for the jQuery UI theme. 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 within it that uses a shade of gray for the “indicates a required field” text). It has a smooth gradient background with a slightly darker border, and the text uses the standard link color (although there is a.
ms-toolbar class (the standard toolbar used at the top of list forms). SharePoint 2007 doesn’t use rounded corners (how un-web 2.0 of them!), so I set the border-radius to 0. The font size is 8pt to match the font size used in most web parts. 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. I left the weight at normal instead of bold because most button and menu elements aren’t bolded. 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).
Here’s a walkthrough of the settings and why I chose them: Font Settings I sampled the exact colors for most of the elements used, but I had to make some adjustments. Note: This isn’t a perfect match with the default SharePoint 2007 design, but it’s pretty darn close. 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. 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 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. 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 functionality is the important thing. Second, I’m not criticizing anyone’s efforts in using jQuery UI without a custom theme. 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.
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. 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. What if I don’t like the default look of SharePoint?įirst, 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. 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. With that in mind, I decided to see how closely I could match the default SharePoint look and feel using ThemeRoller. 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. so I wasn’t trying to match the OOTB look and feel of SharePoint. We have a custom master page, custom page layouts, and our own color scheme, fonts, etc. In order to provide a consistent user experience, I used the excellent ThemeRoller to create a custom theme that matched our branding. I’ve been using jQuery UI in a few recent projects on my department’s SharePoint ® site.
0 kommentar(er)
