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.