Udostępnij za pośrednictwem

nice little article on branding SPS

  • Artykuł

A clean way to brand your Portal

I see (and get) a lot of questions about customizing the look and feel of SharePoint Portal Server. More often than not, this leads to an answer of directly modifying the SPS.CSS files on the server. This always leads to the caveat that this file may be updated with a service pack install or software upgrade. There is a much easier and safer way to do this which will never break.

In your SharePoint setup, Microsoft has provided a way to specify your own custom style sheet. If you know how style sheets work when a page is rendered, the last style specified (no matter how many style sheet files get loaded) always wins. This is by design but knowing this, and how SharePoint works, is a powerful combo that will let you cleanly mod your portal as much as you want without having to backup/restore files everytime your do an upgrade.

When SharePoint renders it's portal pages it renders all of it's own internal stylesheets. These are (in order):

  1. ows.ccs
  2. menu.css
  3. sps.css

Next, it renders any stylesheet you specify in the Site Settings page. Finally it renders the page content. Knowing this means that any style you put into your own stylesheet will override those specified in the Microsoft ones. So now you don't have to go modifying the base files to get the effect you want. Here's a simple example.

Create a blank stylesheet. Put a single style in it. Let's override .ms-WPTitle which is the style used to render Web Part titles. Your stylesheet should contain this:

.ms-WPTitle
{
background-color: black;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
color: white;
padding-left: 6px;
padding-right: 7px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 8pt;
text-transform: uppercase;
}

This creates a style for the web part titles that displays a white uppercase title against a black background using Verdana as a font. Save this file as "mystyle.css" (or whatever name you want).

Now you need to tell SharePoint to use this stylesheet.

  1. Select "Site Settings" from your portal
  2. Click on "Change portal site properties and SharePoint site creation settings" from the General Settings section
  3. The last option is for a Custom Cascading Style Sheet. Put in the location of your stylesheet you created above. An additional trick is to use SharePoint to store your own stylesheet so put it in the Document Library of your own portal. That way you don't have to deal with server administrators whenever you want to change your sites look and it gives you a simple document management process to keep tabs on who's working on this file. So our entry would look like this: "/Document%20Library/mystyle.css" (assuming you uploaded it to the site, otherwise use a fully qualilfied UNC to locate the stylesheet, maybe from your corporate web servers)
  4. Click OK to save the changes

Now refresh the site in your browser. You should see the changes applied to all web parts on your site (Press F5 to refresh or you might have to do a "deep" refresh with Ctrl+F5). Continue to edit this file, making changes with your favorite style sheet editor like TopStyle (or Notepad if you prefer). In no time you'll have a custom stylesheet with the branding you want on your site.

A variation on creating styles from scratch is to take a copy of SPS.CSS and modify the styles you want by changing your copy of this file. This uses the same technique as above (not modifying the file directly) but gives you a list of all the styles that SharePoint uses rather than building up from scratch. Pick whichever method works for you but the important thing to remember is that you don't have to touch the base SharePoint files.

Two more quick tips. There's a list of the styles used with a visual reference in the SDK documentation available here. Also in that file is a short piece of Javascript that you can create and put into a content editor webpart to display the styles on the page when you hover your mouse over them. Both are valuable resources to help you when you're customizing your look.

Note, this is only for SharePoint Portal Server. WSS sites need a custom theme which is a whole 'nuther post and a different technique that I'll walk you through if there's a desire.

Comments

  • Anonymous
    October 21, 2004
    This does work, but you occasionally run into a few strange behaviours. For example, if you create the .ms-phnav1wrapper style in your custom style sheet which has no background-image attribute, when the page is displayed you see what you want, but then all of a sudden SharePoint (more likely IE) re-appplies the missing background-image attribute that it found in sps.css.
  • Anonymous
    July 20, 2005
    I'm trying to customize a WSS site (the "Change portal site properties and SharePoint site creation settings" doesn't appear). I'm had success applying various themes using FrontPage, but I need more control.

    I want my site to look similar to microsoft.com's current theme, please help!

    Brian Reyes
    t-breyes@microsoft.com
  • Anonymous
    February 08, 2006
    This article is great - except it assumes you have access to the style sheets, which I don't. Microsoft does NOT make it easy to customize a theme. It seems you're stuck with the basic themes included with FrontPage 2003. Someone tell me that there is a way ... I sure can't find it.