SharePoint 2007 – Order that CSS is loaded

SharePoint is a complex creature.  There are four ways you can insert your own custom css:

1. Create a custom theme and apply that theme.
2. Add a <link> to your css in the master page: 
   <link rel="stylesheet" type="text/css" href="/customstyles/sample.css"/>
3. Specify an AlternateCSS url (available via browser on publishing-enabled sites, but available via PowerShell on ALL other SharePoint sites).
4. Add a link using <SharePoint:CssRegistration>to your master page:
   <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/HtmlEditorCustomStyles.css%>" runat="server"/>

Note that all of the above will override core.css – except item 4. 

 

The Simplest Way

So if you want to load your own css after core.css, the simplest way is to use method 2.  In your master page, it should look something like this:

<Sharepoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
<link rel="stylesheet" type="text/css" href="/customstyles/sample.css"/>

 

The Details

SharePoint:CssLink loads a bunch of css files (including core.css) for you automatically, and in a special order, over which you have no control.  Say, for example, if you used method 4 above, and added a CssRegistration pointing to a special custom css file.  You can put that registration anywhere you like in the master page, but it will still load that css BEFORE any other.  Here’s a simplified guideline to the order:

[Any CSS files defined by CssRegistration, e.g., Band.css – see method 4]
[Optional CSS files defined by loaded controls, e.g., HtmlEditorCustomStyles.css] 
[Any CSS files defined in page layout, e.g., pageLayouts.css]
Core.css
[Any  Custom AlternateCss – see method 3]

So as you can see, CssLink controls the order of CssRegistration and alternate css.  But YOU have control over where you put ye olde school <link> to css (method 2). 

Another thing that is not loaded via SharePoint:CssLink is any theme css.  That’s done via SharePoint:Theme.  And the order you place SharePoint:CssLink and SharePoint:Theme WILL affect the order of the theme css.  Out of the box, SharePoint:Theme is last, and thus the theme css will load last.  If you swap the two so that SharePoint:Theme is first, then your theme css will load first, then all the other SharePoint css files, in the order specified above.

Clear as mud?  I thought so.  Just wait til I post about the order of CSS in SharePoint 2010.

SharePoint 2010 Musings

After messing about with SharePoint 2010, I have a few comments.

Ribbon – It’s extensible, and supports MUI (multilingual user interface).  Stays pinned to the top when scroll.  Not sure I like that it stays pinned to the top.  While it is useful for editing (a user wants to insert an image near the bottom of a long page and doesn’t want to scroll to the top to get to the “insert image” button), the positioning (under the banner) chews up some valuable real estate, plus the CSS involved is not pretty.  Trying to do a sticky footer with this is… unpleasant.  Still, the idea is that the ribbon allows for fewer page refreshes as you’re editing different things.  I like this concept.  As for permissions, individual items on a ribbon are NOT security-trimmed.  For example, a visitor to a site can see the “Library” ribbon tab, which has items such as “E-mail a link” and “Open with Explorer”.  However, they can also see ALL the other items they don’t have permission to do (they’re grayed out), such as “Create view”, “Edit Library”, “Form Web Parts”, etc., which are things that I do NOT want a user to have to see. 

CSS – “!important” qualifiers are all over the place in the corev4.css.  I’m very disappointed in this.  Not a good practice.

Web parts – You can insert web parts within content blocks now as a default.  This is good or bad, depending on your point of view.  If I have a situation where I want to restrict where web parts can go, I have to nail things down.  Another interesting side effect is that you can actually style the contents of the web parts using the editing toolbar (only of web parts that were inserted into a content area).  Which again, is good and bad.  I liked the AJAX options that are available (make a refresh button available, allow for timed asynchronous refreshes).  Lastly, even users that are “visitors” are able to hover over a web part and see a checkbox in the top left of the web part area.  However, they don’t have permissions to do anything with that checkbox, so it’s just confusing.  Hopefully this is something that will be fixed before release.

Editing experience – When editing, pressing the Enter key doesn’t create a new paragraph, it creates a new div.  Very interesting choice.

Master pages – A few pages (login, error, etc.) can have a custom master page applied via PowerShell.  Haven’t tried this yet.  In addition, for pages that leverage application.master (it’s actually applicationv4.master now), looks like you can update that master page.  According to the official Microsoft documentation (provided at the SharePoint Conference):  “Administrators will be able to specify whether the system pages in the _Layouts folder are rendered using the site master pages provided by site owners or by default master pages available across the system. In SharePoint Server 2007, pages rendered from this directory used application.master. This presented a challenge to organizations who wanted to create a custom UI — since application.master is a system file and there was no option to use a custom master page for this, the only options available were to modify the system file or to style the page with a custom theme. It should be noted that customizing application.master was not recommended because in the event that something unfortunate happened to this master page, none of the system settings for a site could be accessed. Not only does SharePoint 2010 add greater flexibility for how to apply branding to these system pages but it also provides a fail-safe mechanism. If there is an error in the master page used for pages in the _Layouts, SharePoint will reference the default.master file so that system pages can still be accessed.”  I’m hopeful, but will provide an update once I actually get into this deeper.

Visual Upgrade – SharePoint 2010 will be able to use SharePoint 2007 master pages and CSS.  Here’s another blurb from the SharePoint Conference book:  “By default when a content database is upgraded post upgrade the sites will be displayed using the Office SharePoint Server 2007 visuals, giving the user their familiar look and feel. An upgrade site can then exist in one of three states: Office SharePoint Server 2007, SharePoint 2010 preview mode, and SharePoint 2010. This allows the site administrator the ability to first view the site with the SharePoint 2010 user interface before committing to it. This setting is at the Web level allowing for a very granular, flexible experience.”

XSLT – I’m also eager to examine the XSLT support that is provided for views.  Supposedly better editing in SharePoint Designer, too. 

Browser support – IE7, IE8, FF3.5 and Safari4, but NOT IE6.  I like the dance of celebration regarding this here:  http://blog.drisgill.com/2009/11/sp2010-branding-tip-5-handling.html  That blog post also mentions a cool control that can be leveraged, as well:  <SharePoint:WarnOnUnsupportedBrowsers runat="server"/>. 

Missed the Webinar?

If you missed my webinar, Microsoft Technet: Design Considerations for a Public Facing Site (in SharePoint), you can still watch it with live meeting replay.

SharePoint 2010 – Provisioning Web Analytics

Web Analytics is a new out-of-box tool available in SharePoint 2010.  Here’s a helpful link to a post by Bill Baer on how to set it up in your environment.

Free Webinar: Design Considerations for a Public-facing SharePoint site

I’m giving a free TechNet webinar on Design Considerations for a Public-facing SharePoint site December 2nd (a Wednesday afternoon).

TechNet Webcast: Design Considerations for a Public-Facing Web Site (Level 200)

Event Overview

An effective Internet site based on Microsoft Office SharePoint Server 2007 needs to be planned for and implemented in a way that is different than a typical public-facing site. A Web designer can certainly start with an empty master page and build it like any other site, but doing this would not take advantage of the powerful capabilities of SharePoint Server. In this webcast, we provide an overview of what is possible to brand, what SharePoint Server capabilities it makes sense to use, and what you might want to create yourself.

Language(s): English

Product(s): Microsoft Office SharePoint Server 2007

Audience(s): IT Generalist

Duration: 60 minutes

Date: Wednesday, December 2, 2009

Time: 1:00 PM Pacific Time (US & Canada)

Presenters: Lori Neff, Senior Consultant, UI Designer and Developer

© Microsoft Corporation

Starter Master Pages for SharePoint 2010

Randy Drisgill has made some Starter Master Pages (fka Minimal Master Pages) for SharePoint 2010.  See here:  http://startermasterpages.codeplex.com/

SharePoint 2010 Themes

It’s such a simple thing but FINALLY there’s an option to apply a theme in SharePoint 2010 and choose to have its subsites inherit that theme (meaning you don’t have to apply it for every new site).   

Sadly, right now it’s just a lie.  You can choose to have it inherit/cascade, but it doesn’t actually work.  *Sob* So close, so close…

Feeling Inspired

I was lucky enough to have the opportunity to see Bill Buxton’s amazing keynote speech at MIX09 yesterday.  He said that now is truly a great time to be a UX designer.  And while you might raise an eyebrow at that during the current economic climate, he pointed out that the companies who were design innovators during the Great Depression (Kodak was one of his examples) are all still around today.  So go out there and do some great design.

I also got the opportunity to ask Bill about RIAs (specifically Silverlight) and how text fits into that model (I’m thinking of users who want to right-click on a link and open in a new window, for example).  His response was, “Well, perhaps you need a different solution.  Or come up with one.”  An excellent point.  Time for some innovation.  To think outside the box.  I’m filled with many ideas and can’t wait to come back and try them out.

Bill also spoke about the design process.  No less than 5 designs for each project.  If you can’t come up with at least 5 designs, then you don’t have the right design.  And you NEED to do the 5 designs.  If you do just one and stick with it, it’s more than just doing yourself a disservice…  You’re marrying yourself to a design without allowing for room for technical and business needs. 

Well, I digress.  Suffice if to say this conference has been quite inspirational.  Happy designing to all, and to all, good design.

Accessibility Kit for SharePoint

Updated version of the Accessibility Kit for SharePoint is now available.  https://aks.hisoftware.com/aks_Features.aspx

I’m particularly enthused about the Web Part Zone Smart Control Adapter, which will use <div> tags instead of tables to display web parts. Note it only works in display mode, not while in edit mode.

How to plan the branding of your SharePoint site

So you have a SharePoint site (or you’re about to release one).  You want to have your company’s colors and branding scheme applied to your site.  Where do you start?

Recommendation #1 – Training.  Do not send your poor hapless Graphic Designer to SharePoint Designer class.  Just because it has “Designer” in the title, doesn’t mean that it will give your designer the tools required to brand a SharePoint site.  Instead, send your designer to a basic SharePoint class first.  Get them familiar with SharePoint.  After they’re familiar with SharePoint in general, get them familiar with YOUR requirements.  If you can find a class in your area for branding SharePoint, send them there next.  When I find a book on branding SharePoint that I can truly recommend, I’ll post immediately. 

Recommendation #2 – Create wireframes.   Write out your specifications.  Go through each possible iteration of your page to see what you’ll need to cover.  If you haven’t done this yet (and it’s surprising how few actually do), you’ll be surprised at just how many pages will be involved. 

Recommendation #3 – Prioritize.  Find out what you really need branded.  Calendars and search controls can be nasty (to brand), so perhaps a simple color change will be sufficient, rather than overhauling the whole thing.  If you hardly ever use the calendar view of events, then perhaps postpone its overhaul and stick with a plain list view for now.

Recommendation #4 – Think about your content editors.  You’re going to the trouble of branding your site, so make sure that it keeps that consistent look and feel throughout.   While Chuck in Accounting thinks lime green text with a red border is attractive, it might not fit with your site.  With MOSS WCM, you can control the editing tools and styles that are available.  If your content editors are not HTML savvy, then that might impact how you will implement.  For example, a Content Editor Web Part might be too complex for some individuals, so then you might think about enabling publishing features to allow users to edit content right on the page.

Recommendation #5 – Plan your deployment.  Get the developers involved.  Find out how they want to deploy any customizations.  If at all possible, tie in your deployment with theirs.  Plan so that when you need to change your styles (taglines change, things are missed), it can be done as easily as possible.  For example, updating a theme file (even an image) requires an iisreset, then reapplying it is less than fun, especially if you have 100+ sites.  However, if you planned your theme correctly (with an import pointing to another file) or if you used the Alternate CSS, then an iisreset isn’t necessary.