Custom branding with SharePoint

Custom branding with SharePoint

For those of you working at new SharePoint 2007 sites, I have more of Darren Pritchard’s excellent beginner’s guides. This time he’s looking at custom branding.

There are a few different parts to custom branding a SharePoint Web application. You will need SharePoint Designer to create and change the pages. You will need to create a new master page and a CSS file to apply to the master page.

SharePoint Designer is a free application that is available from Microsoft at www.microsoft.com/downloads/en/details.aspx?familyid=baa3ad86-bfc1-4bd4-9812-d9e710d44f42&displaylang=en. SharePoint Designer allows you to open your SharePoint Web application to see and access all the component parts and elements of the application. You are able to navigate through the whole site, which will give you a better idea of how a SharePoint application is built. Be carefully not to change anything unless you know what it is – you could break the Web application if you remove or change the wrong thing!

SharePoint Designer also allows the pages and code to be edited, which is good news for someone new to SharePoint because everything is available within one location.

Let’s start with master pages. These are the templates that are applied to all pages on a SharePoint Web application. They are written in ASP.NET 2.0. When applying custom branding to a SharePoint Web application, this is where the majority of the development will be carried out.

CSS (Cascading Style Sheets) are used to style the master page (just like on most Web pages). Within a SharePoint Web application, there is a ‘core.css’ file, which can be found in the ‘_styles’ folder. You won’t be able to navigate here without using SharePoint Designer. This is used by all of the master pages that come by default in a Web application. This file should not be changed. It is best practice to create a bespoke .css file and use this to override the core.css. This means that you will not affect the default master page styles that are used by other pages.

Content PlaceHolders Controls are regions of content on a master page that are predefined but customizable within SharePoint. So, for example, the PlaceHolder is in bold, which is housed within an HTML table:

<!-- Search Start-->
  <table border="0" cellpadding=0 cellspacing=0 width="100%" class="customcss.class" >
    <tr>
      <td>

      <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
      <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>
      </asp:ContentPlaceHolder>

      </td>
    </tr>
  </table>
<!-- Search End -->

This is an example of a table that will contain the search placeholder shown below:

Any images that are referenced from within the master page must be able to be viewed by all users. Otherwise, users will be asked to log-in every time they refresh the page if the don’t have permission to the library where the image is stored.

I would suggest creating a folder for your master page within the ‘http://Your App/Style%20Library/images’ and locating all of the images there. This will use the standard image locations from the master pages, but keep them separate so that they can be identified easily during future development or maintenance.

When you’re ready to import branding into a Web application, you need to use the following guidelines.

To import a master page:

1    In SharePoint Designer open up your Web application

2    Navigate to http://your site/_catalogs/masterpage

3    Click File

4    Click Import

5    Add your master page here.

To import an image:

1    In SharePoint Designer open up your Web application

2    Navigate to http://your site/Images

3    Click File

4    Click Import

5    Add your image here.

To import a CSS file:

1    In SharePoint Designer open up your Web application

2    Navigate to http://your site/_styles

3    Click File

4    Click Import

5    Add your CSS file here.

Good luck with your modifying your branding.

A look at SharePoint

Let me start with an apology for talking about a non-mainframe technology. I suppose my justification is that this a major piece of software in data centres running Windows. I’ve recently completed two weeks of training on SharePoint 2010 for administration and design – and, I suppose, that’s why it’s on my mind.

Microsoft SharePoint has been around for a while and 2010 is probably the most sophisticated version there is, but what is it? I thought in some ways it was a bit like CICS – but definitely not CICS. And I thought it was a bit like Lotus Notes – but, again, not Notes. It’s difficult to encapsulate easily because it’s software that needs other pieces of software to work (more on that in a moment). It’s far more feature-rich than a simple intranet. In fact, in many ways, it provides a new way of working – a new paradigm – for organizations that might purchase it.

Let’s start off with why businesses might be tempted to buy SharePoint. I suppose that once you get above 20 staff, it gets harder to have that immediacy of information that small sites benefit from. With 50 staff, let alone 200+ it can be days (if ever) that news reaches you about other staff (weddings, baby photos, etc) or corporate news (shortlisted for prizes or being mentioned in trade papers). The natural consequence is that people start e-mailling all staff – so rather than just three 4MB pictures of the new baby (or whatever) needing to be backed up, there are suddenly 200+ versions of the same thing in everyone’s Outlook in-box. Using SharePoint gives you an easy way of sharing news and offering items for sale. It’s also incredibly easy to pick up RSS feeds – like the BBC news and weather.

But if that’s all you’re doing with SharePoint, you’re definitely missing a trick.

Before I look at that, let me just talk about how SharePoint links with other Microsoft products. You need to have Active Directory (AD) and Internet Information Services (IIS) which you probably do. You also need SQL Server, which you may not already have installed. And then you need Microsoft Office and Outlook. You also need to know how to use Visual Studio and SharePoint Designer, and to make life easier there’s about half a dozen non-Microsoft tools that can be used. (I’ll talk about them in a future blog).

The reason I said it’s a paradigm shift is because many organizations will welcome some easy way of sharing news etc, but many won’t realize that they have a problem for which SharePoint is the solution. It’s too easy to continue working in the same old way and not take advantage of things like workflows and sharing.

What made Notes and Domino so powerful was collaborative working. And the word ‘collaboration’ appears right at the top of any list of SharePoint features. Yet many people still have a view of computing in which small individual islands work away, perhaps printing off a copy of a document for final checking before it is sent out. This is the way we worked in the 80s and 90s, but in 2010, we can share documents. Word has given us the ability to track changes for at least 10 years, and yet many people seem unwilling to collaborate in this way.

Workflows are hidden gems. People often complain to me about documents not getting to the right people for checking or not knowing who has a draft version of a document – or, even worse, not knowing whether the version in front of them is the latest one. Built-in to SharePoint 2010 is the ability to define parallel as well as serial workflows. So your document can be checked by two people at the same time before being sent on to a third person for final checking. No more problems with important people not seeing the document or any other procedural failure.

I’ll just quickly mention My Sites. These are replacements for My Documents or Documents (depending on which version of Windows you’re familiar with) plus they are like your own little home page of information.

Users get to SharePoint through their browser. You can add all sorts of things to the pages they see using what are called Web parts. This could include bits of JavaScript, Youtube videos, Twitter feeds, etc.

SharePoint 2010 works properly with Internet Explorer (of course), but also Firefox and other browsers – I think it’s great that Microsoft are becoming browser agnostic (you might mention EU case law!).

You can set up SharePoint to provide your own internal intranet (if that isn’t tautology) and act as an external internet server – so you are hosting your own Web pages.

Also, you can use SharePoint to front-end your applications. The advantage of this is users have to go to your intranet – so they see your corporate news and personal items of interest – and from there they launch their usual applications (such as finance or whatever’s specialized for their organization). There’s no need to run SharePoint in parallel with Citrix or anything else.

On the downside, licences for all the products can be very expensive. And it all works so much better if you’re using 2010 versions of everything (or the latest where there isn’t a 2010 version). You will need someone who speaks C# and can use PowerShell commands to maintain SharePoint and push its usage forward amongst members of staff who are perfectly happy working the way they always have.

But if you can’t have a mainframe, and you’re a moderate to large organization, then there are lots of benefits to be had from using SharePoint. There’s certainly more features than I’ve had space to mention here.

Now all I need to know is how to become an MVP!