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"/>

The Beauty of SharePoint 2007 – Improved Content Editor Web Part

The content editor web part in SharePoint 2003 was very popular – especially for those that wanted to easily add custom static text, images or special scripts to a page. In SharePoint 2007 we see this web part has improved dramatically by addressing a couple of key pain points that existed with the previous version.

Tables

The support for tables has drastically improved by allowing for easier manipulations to a table after its creation as well as support for pre-defined styles and formatting. Overall inserting a table in the content editor is a much more enjoyable experience.

Images

Inserting an image in a content editor web part in 2003 was a little difficult for users that may not have been overly technical or comfortable with the concept of linking to pictures stored on the web or in their site. The new improved content editor, makes it much easier for a user to browse to an image stored on their SharePoint site (or site collection) or an alternate location. The ability to change image size on the fly is another positive move.

Copying Text

Remember the styling pains associated with copying text from a document to the content editor? Well the new improved editor makes this much nicer allowing for the on the fly removing of styles and undesired formatting.

Hyperlinks

You may also recall that inserting hyperlinks in your content editor that were to open in a new window was a task that had to be completed by going into the source editor and adding a target attribute to your link. This has been improved as well by allowing user to specify when creating a hyperlink whether it should open in a new window.

SharePoint 2007 and Print

While rummaging the CORE – stylesheet – in 2007 I unconvered an area where there are efforts being made to make pages more print-friendly by hiding some of the un-needed elements. No idea how much of this will exist in the final build.

@media print –
.ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.
ms-areaseparatorright, .ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.
ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2
display:none;

Psst, SharePoint Devs – There is a small glitch with this PRINT implementation (I think) – It seems to have one set of squigly brackets too many.

In any event it looks promising.

Internet Explorer 7 and Hacks by Dave Shea

Great write-up from Dave Shea, one of my favorite web-standards advocates. This one entitled Stop Hacking or Be Stopped

Teaser:

With the imminent launch of IE7 your usual CSS hacking methods are going to fail. If you want to save web design, as we know it, it’s time to take some drastic action.

Read the full: Stop hacking or be stopped article by Dave Shea

SharePoint 2007 + Accessibility

I just read the SharePoint Team has been putting some focus on accessibility which is awesome news. The timing is incredibly ironic as I am currently involved in a SharePoint project (SPS2003+WSS2.0) that has some blind users. The client will be happy to know this focus is coming in 2007.

Courtesy of the SharePoint Team Blog
Improvements in accessibility
We have been getting quite a few questions via blog feedback e-mails about accessibility, so I wanted to share the following summary of new and improved accessibility features that the WSS V3 team is working on, which are of course leveraged by Office SharePoint Server 2007 as well. Things can still change between now and RTM, so please don’t take the following list as a promise of full compliance. Nevertheless, the Windows SharePoint Services and Office SharePoint Server product teams are definitely committed to improving accessibility and enabling all customers to utilize the power of SharePoint Products and Technologies.

http://blogs.msdn.com/sharepoint/archive/2006/04/24/582506.aspx

Quest Software’s Discovery Wizard for SharePoint

There has been a lot of buzz around the SharePoint community recently about the recent release of Quest Software‘s SharePoint Discovery Wizard.

Amanda and I had the opportunity to work with Quest on a SharePoint project and they were a great bunch to work with, very “user-focused”, so I was very pleased to see these guys recognized within the community. I expect to see a lot more from them in the future.

The Discovery Wizard:
Discovery Wizard for SharePoint is an auto discovery tool that identifies your entire SharePoint environment – all servers, site collections and sites – gathering important information on your discovered inventory.

discovery.gif