Applying Themes

Themes have a couple of big advantages over Master Pages:

  • Any type of site will let you change the theme.
  • They style the Site Admin pages too.

…but there are some pain points too:

It’s certainly worth considering how your theme will be applied up front – although you could using the Alternate CSS url to ‘apply’ your theme. Personally, I think I like the idea of using a Feature.

Applying Themes

Corrupt Breadcrumbs in the in PageAreaTitleFrame

I was tempted to call this “The incredible case of the bust rendering of SharePoint pages”, but it seemed a bit long, to be honest. This is a bit of a detective story (and if I’d the developer who built this in the first place, there’d be a murder) so stick with me… Continue reading “Corrupt Breadcrumbs in the in PageAreaTitleFrame”

Corrupt Breadcrumbs in the in PageAreaTitleFrame

Style the DatePicker using an Alternate CSS

A while back I posted about the how daft that the datepicker control isn’t styled by themes, and is in the _layouts directory, so you shouldn’t edit them.

Well, a while later Michelle posted with a good idea of how to brand them – use an alternate CSS URL. I must confess, this tip passed me by until my recent branding efforts, and I discovered her tip.

So why does this work? Well, if we crack open the file iframe.aspx (which I still think is a bloody stupid name. I mean, the defining feature is the DatePicker control, not the bloody iframe it uses) we can see the code:

There we go – code to insert the alternate CSS url (but not themes – obviously).

So, I gave this a go:

Tada! Styled date picker, nice one Michelle. However, she notes that it has to be applied to a publishing site, or to a publishing site and all sites below it. Site collections based around a team site would be tricky. Normally, this page is used to set the alternate CSS…

[image of site]

… and, well, Team sites don’t give you that page.

However, we can achieve this in code! All the admin page does is change the SPWeb.AlternateCssUrl property for a site or set of sites. We could have a feature receiver (a bit of code that is run when a feature is activated or deactivated) to do this:

public override void FeatureActivated( SPFeatureReceiverProperties properties ) {

SPWeb site = properties.Feature.Parent as SPWeb;

site.AlternateCssUrl = "[Your URL here]";



More evidence that brands are best applied by feature receivers. Maybe I should make an example of this…

Style the DatePicker using an Alternate CSS

Rounded Corners are cool in SharePoint, apparently

I’m not a designer; I neither wear cool enough glasses, a turtleneck, nor sport an iPhone. But I do have to build other peoples designs, and I’ve noticed something – every design I get handed has rounded corners all over it.

I do see their point – SharePoint is a bit, well, ‘Square’. “Boxy but good”.

So instead we have designs with corners, well, all over them. Here’s the one I’ve been working on:

Things to note there – Rounded corners on the tabs in the top nav, and a rounded corner (only one) on the web part title. How did I do this? Continue reading “Rounded Corners are cool in SharePoint, apparently”

Rounded Corners are cool in SharePoint, apparently

Comparison of different ways of putting content into SharePoint 'Pages'

Previously I’ve looked at a couple of ways of entering your data into a Publishing Page. Well, it turns out that really there are 3 ways of putting content in:

  1. Writing content directly using the Content Editor control (the RichHTMLField control)
  2. Writing content in Word 2007 and using the Document Conversion service
  3. Writing content in Word 2007 and cutting and pasting(!)

I decided to test and compare these techniques. For options 2. and 3. I used this document:

The Source Word 2007 Document

Let’s look at the results of this and the code that is behind each resulting page… Continue reading “Comparison of different ways of putting content into SharePoint 'Pages'”

Comparison of different ways of putting content into SharePoint 'Pages'

Options for Branding SharePoint

Okay, so I’ve been tasked with looking at branding in SharePoint – again! What do I know about branding? I can change some colours and CSS, but that isn’t the same thing.

Anyway, I’m increasingly taken with Themes over Master Pages. You can do a lot with a theme, and one of it’s main disadvantages as far as I’m concerned (the inability to apply a theme across a hierarchy) can be overcome with extensions (though I’d prefer a Site Admin page option).

Another thing that I recently realised (and then discovered that I’ve probably read about too) is that you can ‘apply’ a theme to all subsites by setting the ‘Alternate CSS URL’ on the Site Settings > Master Page page. You can find the URL to a theme on a site that has that theme applied, and then paste it into the alternate CSS URL field, and apply to all children. Cool! And if you apply a theme to one of these children? Well, the theme will override the Alternate CSS – so your theme will apply.

All of which kind of confuses the heck outta people. You’ve got styles coming from, potentially, the CORE.CSS, alternate CSS, themes, masterpage’s CSS files, the master page itself, and the page. I think it works out as:

CSS Inheritance in SharePoint

…where the lower items win. It’s worth noting that the overriding of styles isn’t that fixed – your master page could pull in the themes, core.css, etc. in a different order if you wanted it to, but this is typically how it seems to be. Just remember that last wins.

And the best bit – generating Themes now has tools, such as SharePoint Skinner, and Serves SharePoint Theme Generator (though it’s more about just the colours).

New Master Pages are just awkward, though – so many required placeholders, CSS and structural quirks, controls generating things that they shouldn’t. I don’t think I’d go there again unless 1) it’s a WCM site or 2) I really need to change the page structure.

Options for Branding SharePoint

Make sure you use the .ms-bodyareaframe style in your Master Pages

So, I’ve just discovered something interesting. In SharePoint, some content should fill the whole of the content area of the master pages; others should have a margin. For example, viewing a document library fills the content section, but Wiki pages need a margin. This is achieved by the ms-bodyareaframe style in the master page, which supplies the padding for the content that is contains.

Ah, but how does the content that doesn’t need a margin get displayed? Well, it supplies an override to ms-bodyareaframe to set the padding to zero – and that is why you should make sure you use the ms-bodyareaframe style!

I found this when working off Heather Solomon’s Minimal Master pages, which don’t include this style.

Make sure you use the .ms-bodyareaframe style in your Master Pages