SharePoint 2007: A first look at the CSS

Those of us that have been working in the trenches doing customization work for Windows SharePoint Services 2.0 and SharePoint Portal Server 2003 are quite familiar with the old CSS structure:

CSS in WSS 2.0 + SPS 2003
OWS.CSS (Global WSS), SPS.CSS (Global SPS) and OWSpers.CSS (Global MySite) and the other lesser style-sheets like the merged (personlized) 1011-109.css, menu, color, graph .css and the Macintosh IE 5.2 version.

So what does 2007 have in store for us in the CSS department
Keep in mind this is (definately) open to change – this information is based on beta-product information. What you will notice though is that the team has been carefully renaming the style-sheets to make them more intuative. For example there is now a “CORE.CSS” which as best I can tell will replace the OWS.CSS.

After taking a look at the different types of sites I decided to give people an early bird look at the style-sheets as they are applied in order to each site type.

Note: I am not exactly sure on the “WSS” level as it’s still very blurry to me. I am for now referring to the WSS level as I always have – A workspace/teamsite that I create from the Portal Level which I might add a now housed in the “SiteDirectory” – which is very nice because you can get there “directly”. Remember what happened when you tried to hit: http://myserver/sites?

Enough of that on with the good stuff.

MOSS 2007 now references the following stylesheets in this order:
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/controls.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/HtmlEditorCustomStyles.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/HtmlEditorTableFormats.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/portal.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css"/>

When you create a site from your Portal area (WSS 12?) the following style-sheets are referenced
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/portal.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css"/>

MySite now references the following style-sheets
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/portal.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css"/>

This entry was posted in SharePoint 2007. Bookmark the permalink.

2 Responses to SharePoint 2007: A first look at the CSS

  1. Bob C says:

    Any ideas on how to apply the styles like blackglass, black, grennglass to the default.master?

  2. shane says:

    Bob,

    I’m not even sure what / where these styles are. Are you referring to themes? Or are you referring to skins?

    If it’s a theme you should be able to reference the stylesheet using the default.master – I have not looked into skinning much as of yet.