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.

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;
}

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…

Feature Receiver to apply master pages to normal or meeting sites

As noted previously, Meeting Workspaces use a different master page to the ‘normal’ master pages in SharePoint. This is a little annoying – if I need to apply a new master page, how would I do this?

Well, you can activate a new master page in a Feature Receiver. And we can detect the type of site we’re dealing with. Why not combine the two techniques Continue reading

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.

How to find out what type of site a site is…

I’ve built a feature to active branding on a site including master page, navigation and themes, which I’ve been talking about a bit over the last few weeks. One issue, though is that meeting workspaces have a different master page to ‘normal’ master pages, so I need to set them to use a different ‘custom’ master page when the feature is activated. This means that my feature receiver has to ‘know’ if the site it’s being activated on is a Meeting Workspace, or some other site.

What defines the ‘type’ of a site is the template that was used in it’s creation. Continue reading

Date Picker controls have variable width

I’m beginning to hate the SharePoint DatePicker control. It displays with different widths:

What defines the width of this control? Damned if I can see – it appears to be the widest element within it. This means either:

  • the length of the date link at the bottom of the control
  • the length of one of the week rows

This is probably less of an issue for Americans (right) than the British (left) – I presume that other Europeans will have the same issue.

Certainly, this will result in some squashed looking calendars on certain months. Yet try as I might, I couldn’t get the calendar to fill an entire area.

And why does the American format give the day and the normal format not?

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]";

site.update();

}

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