Archive for the tag 'Branding'

Themes in SharePoint 2010

So, followers of this blog will know that I seem to get quite a lot of branding tasks, and that I don’t much like themes, preferring to use either the AlternateCssUrl and  Features instead. Features are great – you can deploy the CSS/image files you need, set master pages (and handle Meeting Workspaces), themes, AlternateCssUrls. They can also add HTTP Modules for branding Application Pages.

Themes, on the other hand, are fiddly to install automatically, don’t work on the DatePicker, and are individual to each site once applied. To pick up changes to a global theme, you’d have to apply a different theme and then reapply the desired theme - for every site.

Well, that was with SharePoint 2007. SharePoint 2010 is a bit different, as I got to find out on a Combined Knowledge course in January (and this is the first time I’ve managed to write about it!) Read more »

Adding CSS links to your SharePoint pages or code…

I love Twitter – you get some though provoking questions on it. Thomas Resing asked the other day:

How are you applying styles to your custom web parts in #SharePoint? using CSSClass property, stuck on deploying css <Link> tag in the head

Well, for pages themselves you have the CSSRegistration control. It’s an ASP.NET control, and looks something like:

<SharePoint:CssRegistration name="/_layouts/myBrand/SomeStyle.css" runat="server"/>

This control registers the URL with the page, but doesn’t emit anything. That’s controlled by the CssLink control:

<Sharepoint:CssLink runat="server" />

It actually outputs the <link> elements, and this means that you can have a CSSRegistration control low down in the page (in a Content control, for example) and you can still output it in the <head> of your page. There’s a good post about this on CleverWorkarounds. 

So, could we use that control? Well, we should be able to instantiate one – except it turns out that we don’t have to. We can just use the CSSRegistration.Register() static method – something like:

protected override void CreateChildControls(){
CssRegistration.Register("/_layouts/myBrand/SomeStyle.css");
}

Job done…

Automatically add themes to the SPThemes.xml file

I’m not sure I’ll use themes again over the AlternateCssUrl again in a hurry, but I did decide to take a look at the 10 example themes Microsoft Released in March. I’ll blog about how they look – sometime! (The short answer – some good, some bad, some awful!)

Anyway, I was interested that the themes could all be activated as features. This rather kept with my feeling on how branding should be deployed.

However, some of the themes (though not all) were suddenly available in the ‘Site Themes’ page of my SharePoint system. I knew from experience that this isn’t something that ‘just happens’ – previously, I’ve done it by hand.

EDIT: See the comments – they describe an possible pit fall, but both have articles about how to do the same thing… Read more »

Out-of-Box Publishing Page layouts suck too

So, might not be news, but SharePoint’s out of box Page Layouts suck. I’ve already described how the page layouts have an image on branding, introducing styles to change the navigation, etc.. This has led me to the conclusion that you shouldn’t use the out-of-box publishing sites – start from a minimal publishing site, and build from the ground up.

But what of customers who have naively thought that, I don’t know, a Collaboration Site Template might be a good template to use for the collaboration site? Well, this is the problem I’ve got now; a customer has used the out-of-box page layouts extensively, and now wants the styles of the text and so on to be consistent. How can I do that? Read more »

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.

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) Read more »

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.

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.

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.

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.

Next Page »

 Subscribe in a reader