Options for Branding SharePoint

Posted on February 20, 2008 by Andy

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:

…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.

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

Posted on October 29, 2007 by Andy

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.

Styling the ms-hovercellinactive style

Posted on October 24, 2007 by Andy

So, I’ve had a interesting problem – I’ve been asked to style up a site which uses a very dark colour for the area behind the ‘global links’ at the top of the page. “No problem”, I thought, “I’ll just make the colour for the hyperlinks up there white”. Wrong! The styles which are applied to the Welcome control and the My Links menu are Shared with other page elements – such as on the publishing console. See below for what I mean – the areas sharing a the ms-splink and ms-hovercellinactive styles are bordered in red.

This posed a problem – some elements needed dark text, others light, and SharePoint gave them all the same style. Looking at the master page, I couldn’t see any way of directly applying my own style – they seem to be built into the delegate controls (though I must confess, I can’t see where). Anyway, I didn’t fancy the delegate controls.

After much head scratching, I realised my mistake – CSS always overrides with the latest applicable style. Thus, in the end all I needed to do was make sure that there was a style which only applied to the items in the ‘global links’ section, and that it came after the ‘normal’ ms-splink and ms-hovercellinactive styles.

Thus, I found that the following style did what I wanted:

/* Style to make the link menus for 'Welcome' and 'My Links' light coloured text */ .ms-globallinks .ms-SPLink a, .ms-globallinks .ms-SPLink a:link, .ms-globallinks .ms-SPLink a:visited, .ms-globallinks .ms-SPLink a:active{ color:#ffffff; }

SharePoint Skinner

Posted on September 13, 2007 by Andy

Themes in SharePoint are tough. I think this quote describes it nicely:

If you have attempted to override the styles on an out of the box SharePoint site, you know that it isn’t a very easy thing to do. The core.css file that contains the basic rules has 979 different style rules.

The core.css file uses a palette of 132 colors and 143 images.

The default page of a newly provisioned team site uses only 61 of those rules.

So, unless you have branded a lot of SharePoint sites and are intimately familiar with core.css and the default master pages and page layouts, just figuring out where to start modifying can be a daunting task.

So Doug has built SharePoint Skinner to make that easier. I’ve not tried it (yet) but I like his thinking…

MOSS, themes and master pages

Posted on April 12, 2007 by Andy

So, Joel Oleson has blogged a bit about master pages and themes in MOSS. This is an area I think that the SharePoint team have the right idea, but execution is a little short.

My problems are that we have master pages – which is great. And we’ve got seperate master pages for standard pages, and administration pages. Okay, I’m happy with that. However, there is a mechanism for changing the master page for normal pages – but nothing for administration pages. ‘Cos nobody will ever look at them, right?

Then there is the question of master pages and themes. I really like some of the themes that come OOB, much more so than the default ‘blue’ (I like ‘Simple’). But they can only be applied on a site by site basis; there is no inheritance mechanism. And if you use a master page, it’ll probably override the theme anyway. So why have themes? Why not just use master pages?

No Theme Inheritance in SharePoint

Posted on February 14, 2007 by Andy

Bit of a shocker – no inheritance of themes through a site hierarchy in WSS3. There is of Master Pages, but not of themes.

Given that you can do all of what you do with Master Pages it does make me wonder – what are Themes for?

Updated: Heather Solomon has looked at it, and her suggestion is to just put your styles in the Master page.

Updated again: Or just use the Alternate CSS URL for your site.

Useful CSS Reference from Heather Solomon

Posted on February 8, 2007 by Andy

The CSS elements of SharePoint

Using CSS to underline text in a textbox

Posted on September 11, 2006 by Andy

As used in SharePoint 2007 – putting a red wavy line below text in a text box. Neat.

Just in case I ever need this (and the page goes missing):

Lists and CSS

Posted on May 2, 2006 by Andy

You can’t control the space between a bullet point on a list-item, and the text that follows it. That’s a real pain – I was trying to put bullets into a narrow column. Controlling the indent was, well, tricky too.

Why is CSS unable to style obvious things like this? I mean, radio buttons? Checkboxes? Grrr…

Comments from my old blog:

Workaround = ditch the standard bullet, create an image, place it left top, use some left padding.

By Rew at 02:18:37 Thursday 4th May 2006

Hey Rew,

Yeah, considered that, but it was too complicated – I was driving this through Microsoft Content Management Server – the users have access to ‘unordered lists’, but asking them to just use images would have been a bit too much.

Plus, it would make site-wide changes impossible.

By Andy at 13:43:27 Friday 5th May 2006

Rounded corners

Posted on June 22, 2005 by Andy

Here’s an interesting attribute in CSS I didn’t know about
-moz-border-radius
The style below is :
font-size: 12px; background-color: #ffffff; -moz-border-radius: 8px; border: 2px solid #3366cc; padding: 7px;

A box with a border! Of course, this only works in Mozilla

Another box with a border!

Andy Burns’ SharePoint Blog

Whatever I’m working on, really…

Tag Archives: CSS