Tuesday September 18, 2007

SharePoint Bound

by Christian Bradford in Technology

7 comments

Everyone likes a challenge. Front-end developers thrive on challenging designs implemented in lovingly crafted sites and applications. So, what happens when you’re handed a great design but told that your client’s platform of choice is SharePoint 2007? Sure, you can do wonders with a “custom master page,” but there isn’t budget for that kind of development this time. They only want the look updated; they don’t want to support a bunch of changes behind the scenes.

Can we implement the above design bound by those restrictions? Indeed, most of it can be accomplished with a single SharePoint theme, given a specific caveat. We won’t be able to deviate far from the basic layout of a typical MOSS page since it will still be constructed of tables. As long as the design conforms to that restriction, then we can accommodate this design solely within a theme. In this case, the designer knew that basic layout and didn’t stray far from it.

Themes in SharePoint

For SharePoint 2007, a theme is primarily made of the stylesheets that contain the appearance of the site. The rest is any necessary images for backgrounds or icons. The theme chosen will overwrite the default SharePoint style: the serene, calming blue shown below. SharePoint comes with many alternate themes in its default install, most of them changes in the color scheme only. We can use one of these as the foundation to create our custom theme.

A modified theme can be difficult to debug, when you’re trying to make sure all of the necessary page elements have been updated. Any rule you fail to update will retain the color scheme of the previous theme you copied. Alternately, if you remove a declaration from the new theme without replacing it, the default blue color scheme may peek through. Therefore, take care when you select a theme to copy and consider the following:

• You can choose an existing theme that compliments your design’s color scheme. Then, when elements you have not updated show through, they should hopefully not clash.
• Try an opposing color scheme. With colors that stand out, it should be easier to notice the elements you haven’t yet updated in the theme. The “Plastic” theme can be good for this, with its bright oranges, etc.
• Or perhaps, use a theme with very little color, like “Simple.”

If you haven’t copied a theme to customize before, it can be a chore locating everything that needs to be updated. SharePoint Blogs’ blogger Tigirry has posted a concise description of the steps necessary to duplicate a theme. In his example, he copies the “Granite” theme, but I chose to copy the “Wheat” theme for our design since it uses browns and yellows. These colors should be complementary for our intended design.

Altering the Theme

With your new theme created, named, and applied in the SharePoint Site Settings, the page should look like you’ve applied the copied theme. Now you are ready to make changes to the new stylesheets. The directory containing the theme stylesheets is located on the SharePoint server here: C:\program files\common files\microsoft shared\web server extensions\12\template\themes\. In here, you’ll find multiple CSS files: theme.css contains the majority of the style rules, and mossExtension.css contains a smaller set of additional rules. Also, any replacement background or miscellaneous images from your design can be placed in this directory.

You can make changes to the theme.css file directly, but those changes typically won’t be picked up until an IIS reset occurs. A temporary file, ending with “1011-650001.css” is actually used by the server as the “live” CSS file for the theme. This file is built from the combination of theme.css and mossExtension.css after an IIS reset or the restart of appropriate SharePoint services.

If you are using SharePoint Designer to edit the theme, the temporary file is actually available for editing. In Designer’s Folder List, you’ll find sub-directories named “_themes/“ and, within there, a list of the files found at the previous path we specified, but now including the temporary file. The beginning of the filename comes from the name of the theme; we named ours “SPToday,” so the file is “spto1011-650001.css”. Updating the temporary file with your changes will make them available immediately upon refreshing the page, no IIS reset required.

However, after you have made significant changes to the temporary file, copy the contents back into theme.css and mossExtension.css. Sometimes you’ll notice changes you’ve made missing from the version you’re reviewing in the browser; that’s an indication the server has rebuilt the temporary file from the old information in the existing files. Regardless of how you’re editing the files, it’s always a good idea to keep a backup of your latest changes to the theme files somewhere outside the MOSS directories so they won’t get overwritten.

In the CSS files among SharePoint’s included themes, the majority of the styles are referenced only by class. Almost every element or container has a class assigned. This is, I imagine, to keep the specificity of the selectors in SharePoint’s basic CSS files very simple when the elements are so deeply nested. Feel free to make your new rules much more specific. With so many classes, I recommend using a developer tool in your browser of choice to identify the elements you are attempting to update: the Developer Console in Opera, DOM Inspector in Firefox, or the IE Developer Toolbar in Internet Explorer. Also, Heather Solomon’s CSS Reference Chart for SharePoint 2007 provides a guide to all the standard SharePoint page elements and their respective classes.

Additionally, small changes can be made within individual webparts on a SharePoint page. Making sure its chrome is set to show its title and borders will expose more nested containers around a webpart, each with a class, allowing for additional hooks to use in the stylesheets. Icon images in the title bar for each webpart can also be specified in the advanced settings.

Our Completed Theme

Between the custom theme and standard changes to the webpart settings, you can see how close we were able to match the mockup:

Pretty close. You can still see how the layout is dictated by the default master page, but the visual presentation is much improved. More importantly, we met the client requirement that the only custom development necessary was the creation of a custom theme.

So, front-end developers needn’t fear SharePoint 2007 when the theming provides them with a great deal of flexibility in modifying the presentation through CSS. And we didn’t even touch the master pages yet…

Comments on “SharePoint Bound”

1. Ivan said:

   Impressive! I am just starting to get my head around customising Sharepoint for external facing web sites and this shows just how much can be done using themes. Thanks for the info, very useful.

   ---

2. Russ said:

   Great article! This makes the few things you weren’t able to do here with just the theme simple modifications to the masterpages / layouts rather than a huge overhaul. The show chrome tip on webparts is a nice little gem, too. Thanks!

   ---

3. Timothy said:

   An excellent article! I am very impressed with the way you handled this solution. I have been struggling with this for quite sometime and your methodology was a great help. I look forward to reading more of your posts. Great job!

   ---

4. Jeff Adams said:

   Editing the temporary CSS file to see immediate changes is worth its wait in gold. There is nothing worse then having to reset IIS and switch to a different theme and back just to see how one little change looks. Thanks for the tip.

   ---

5. Kale said:

   Cool design. I assume you can’t share the theme css code, but could you tell me how you added the text “Search” in front of the search box? I figured you would have to modify the master page to do that, but it sounds like you did it all within the theme.

   One other tip that I found else where is to put an import url in theme.css (ex. @import “http://servername/sites/test/documents/custom.css”;) and point it to a file in a document library or elsewhere. That way you can modify the file at will with your favorite editor and see the changes with just a refresh. Anything to avoid SharePoint Designer is nice!

   ---

6. Jeff Adams said:

   @Kale

   The text “Search” is actually a CSS background image on this element: #SRSB div. Just make sure you give it enough left and top padding for the image to show up.

   ---

7. Christian Bradford said:

   Thanks, Jeff. Yes, that “Search” is a background image in front of the search field. However, the field has no label associated with it, so there was nothing to replace and keep the context attached to the field. Other than a couple minor inserts like this, I would certainly not recommend that content be inserted this way, since it isn’t accessible. You would have to make master page changes if you wanted any accessibility improvement on your SharePoint portal, though.

   ---