What's wrong with SharePoint Branding?

Joel Oleson asks an interesting question:

Why don’t we have a community around our masterpages and themes?

It’s a good question. I can download a million and one WordPress themes, but very few SharePoint ones. Why? Well, I like to answer a question with another question, so here’s a few:

  • What’s the market? Who want’s ’em? Well, amongst our customers, corporates mainly. These are the chaps who have expensively developed corporate brands. Off-the-shelf brands and themes aren’t going to meet their expectations.
  • Are there small organisations? How many small/non-corportate SharePoint systems are there? The reason so many WordPress themes get written is that there are a lot of WordPress bloggers out there, and lots of hobbyists. How many SharePoint ones are there? Yes, WSS3 is inexpensive – but to work with it, you’re raising the bar on technical expertise requirements. Most blogging plaforms – simple. SharePoint – colossal. And SharePoint Designer costs money – most of the other’s need NotePad, or have a built in editor. Once you’ve started to get into spending money like that, either companies go with the out of the box branding (“we just want the functionality”) or pay (“it must be our brand”).
  • Why is it so freakin’ complex? Core .css is 81Kb and 4350 lines long. That’s before you start looking at the other CSS files that you typically need to change – like Controls.css, Calendar.css, Portal.css, DatePicker.css, the HTML editor ones, the menus … ! My styles directory holds 220Kb’s of CSS! Compare that to a WordPress blog. I get why designers and hobbyists build WordPress themes – but what sort of masochist is going to write a SharePoint one for fun?
  • Which Master Page? The Default Master? What about the Meeting Workspace Master? And, not wanting to scare anyone, but Application.master and Simple.master, which you can’t change (but can redirect – with code). And your users will see pages that use the Application.master – document upload, recycle bin, viewing all site contents. So a ‘new master page’ is not just one, it’s many, and it takes technical cleverness to replace some of the master pages involved. Most designers are into technical cleverness – nor should they be, it ain’t there job.
  • Themes? Themes are good, but limited – there’s no out-of-box way to apply them to a hierarchy of sites, and they can’t make major structural changes to pages. Sure, they can be used sometimes, but again, takes technical expertise. And they don’t style the Date Picker; for some obscure reason, it’s not coded to support themes.

So, I guess in summary, it’s too complex for the typical design crowd, and way beyond the general Web Dev hobbyist community. Most of the designers who can do this sort of work are already doing so – for large companies who pay to have their brand, and don’t want an off the shelf one. I mean, I reckon I can rebrand a SharePoint site pretty completely – though I’ve never tried My Sites (another complexity!), and by the time I’ve done the images, the styles, changes to the master pages, tested it all, wrapped in a feature, you’re looking at, well, days, probably more than a man week, for someone who knows what they’re doing, isn’t aiming for accessibility, and is clear about their objective.

All in all, it’s harder than it oughta be.

Advertisement
What's wrong with SharePoint Branding?

Plan Your Publishing Pages

I was reading Andrew Connell’s book ‘SharePoint 2007 Web Content Management‘ and it made something crystallize for me. I’ve been pondering this for about 8 months or so, but I believe that several of our customers are using the Publishing features of MOSS incorrectly, and that simply basing sites on out-of-box Collaboration and Publishing site templates is a mistake.

(Well, at least without additional planning) Continue reading “Plan Your Publishing Pages”

Plan Your Publishing Pages

Style individual web parts

Like Heather Solomon, I’m sometimes asked about styling individual web parts differently to the rest. I didn’t know of any way of doing this; instead, we’d typically style particular web part zones differently, but this meant that all web parts in that area looked differently.

Well, Heather has now posted ‘Controling single web parts with CSS‘. Neat. I didn’t know you could do that attribute selection.

The downer about this technique is that you have to set a DOCTYPE – and I can see that causing all sorts of grief as stuff breaks… …so it’s probably not something you’d do unless you’re building reasonably custom master page.

Style individual web parts

Feature Stapling for Branding

As I’ve mentioned before, I reckon that from now on I’ll do all SharePoint branding through features alone – not using themes or the ‘choose master page’ page. Which is fine, and useful too – one of the questions that has been raised recently is how to automatically apply the branding when a new site is provided. Well, feature stapling is the way to do that.

For those who don’t know, feature stapling is creating a feature which associates another feature with a Site Definition. When a site is provided by that site template the associated feature is activated. So, for example, we might have a BrandingFeature feature, which does all of our setting alternate CSS, setting master pages, etc., and then use a BrandingStapler feature to associate that with some (or all) of our site definitions.

I won’t bother repeating the ‘how to’ of it, as there are plenty of good posts about it.

Feature Stapling for Branding

Build page layouts without Breadcrumbs or a Title

Right, so SharePoint uses pages and page layouts – I won’t talk about the different types, but ask a couple of questions that’ve come up a few times.

  • If I create a new page layout in SharePoint, how do I get rid of the breadcrumbs?
  • How can I get breadcrumbs, but like the home page?

Here’s how… Continue reading “Build page layouts without Breadcrumbs or a Title”

Build page layouts without Breadcrumbs or a Title

Another day, another master page

Well, I’ve just built a lovely little HTTP Module that lets us redirect the application pages for a site or site collection to a new master page. I’m quite pleased, to be honest. Anyway, I noticed that the error pages in the site I was testing on were not using my new master page, so I started to examine this. I found that the error page (_layouts/error.aspx) is busy using simple.master. WTF?

It makes sense, I guess. You do need a master page which doesn’t run in an authenticated context, and a brief check shows that this is the master pages for the out-of-box Forms authentication page.

I decided to check out if there were other master pages in Layouts – and there were. My list of master pages is now:

  1. Default.master – used in normal sites. Often replaced for publishing sites.
  2. MwsDefault.master – use in Meeting Workspaces. Awkward to replace, but can be done through code or SharePoint designer.
  3. Application.master – used in ‘administration’ pages, and sometimes pages such as ‘View all site contents’, Recycle bin, and uploading a file.
  4. Simple.master – used in pages that need to run in an unauthenticated context – such as error pages, or forms authentication pages.
  5. sspadmin.master – seems to be used editing audiences, in excel services configuration, in profile administration, and handful of other places.
  6. layouts.master – no idea what this is for. Can’t find where it is used!
  7. dialog.master – used in the little pop-up dialogs, such as when you’re adding or editing a Hyperlink.
  8. pickerdialog.master – used in pop-up dialogs such as the web part gallery, or selecting users.

The master pages in italics are comparatively easy to replace; the rest are much more difficult. And try as I might, I couldn’t change the master page for Errors in my HTTP Module. I guess what I’ll do is write another one to redirect errors to my own custom-branded error page.

Another day, another master page

Where to put CSS when branding?

I’ve recently come to the conclusion that I’m unlikely to use Themes in SharePoint again in a hurry. Why?

  • Themes allow you to provide a bunch of CSS styles. So does the AlternateCssURL.
  • Themes have to be applied site-by-site (unless you do some programming, or extend STSADM). Alternate CSS or Master Pages can be changed for a site and subsites, for a Publishing site anyway (although with some limitations).
  • Alternate CSS can be provisioned from a single URL – so benefiting from browser caching just like images.
  • The Alternate CSS can style the DatePicker. Themes can’t.
  • The Alternate CSS can style Application Pages, just like Themes (but unlike Master Pages).
  • No problems with ‘Style Merging’ when the Theme is provisioned.
  • Style can be updated in one location.
  • Themes can be changed through the UI for any site. Only Publishing sites have a user interface for changing the Alternate CSS.

Yes, many of the same distinctions between Master Pages and Themes still exist, and the same sort of analysis and choice of approach should be done. However, it means that we can kind of ignore Master Pages, and just focus on Alternate CSS vs Themes – and it seems to me that apart from the last point above, the Alternate CSS approach seems to equal or better than Themes.

Regarding the last point, well, to apply my theme I’d set the Alternate CSS in a Feature Receiver. This is okay, though, as I’d probably be writing one anyway to apply the correct master page to different types of site.

So, the answer I’ve come to now – I’d use the _layouts directory – create a sub-directory for your brand, and put your CSS and images in there.

Where to put CSS when branding?

What is MSOLayouts_MakeInvisibleIfEmpty()

I was looking through the code of SharePoint’s Blank Web Part page layout, and I kept finding elements called _invisibleIfEmpty. Now, I’d noticed that some page layouts, such as the Splash page layout had borders on their web part zones which were only shown if the zone contained a web part. I was interested in how this might work. People keep asking for web parts with borders, preferrably ones with rounded corners. Continue reading “What is MSOLayouts_MakeInvisibleIfEmpty()”

What is MSOLayouts_MakeInvisibleIfEmpty()

My Sites links HoverCellActive doesn't show the top border

This has caught me out three times now – I build style, but the top border for the global links ‘My Links’ link didn’t show:

I checked my style, and there it was. So I tried adding a margin, or padding in the cell that contained it.

Wrong. It needs it’s height to be set to 100%.

.ms-globalbreadcrumb .ms-HoverCellActive,
.ms-globalbreadcrumb .ms-HoverCellInctive,
.ms-globalbreadcrumb .ms-HoverCellActiveDark{
height:100%;
padding-top:1px;
}

My Sites links HoverCellActive doesn't show the top border

Stuff I forgot to style

SharePoint has a lot of page elements, and it’s hard to brand it all without missing things. Lists of Page elements like Heather Solomon’s CSS Reference Chart and her “Oh crap, I missed that” list help, but I still found a few that weren’t mentioned. So, I guess this is my “Thank God my testing found I’d missed that” list:

Advanced Search Page – nice grey.
Creation Information Panel – when you hover over an item on the ‘Create’ page, you’ll see this.
People Search Options – shown dynamically when you click the link.
Gantt views – as used in projects
Repeating Meeting Left Nav
WSS Search results page – just ‘cos you’re using it doesn’t mean it isn’t there – or that it won’t be seen…
The Date Picker – and all the problems inherent in that…
Stuff I forgot to style