Category Archives: Branding

SharePoint 2013 Design Manager

I haven’t used it yet, but here are a few detailed reviews of it. It looks worth trying out.




SharePoint 2010 Branding – The Custom Footer

Business Requirement:

The company you work for is looking to educate employee’s about their participation in Earth Week using the corporate intranet. The company would like to use a new method to drive employee’s to this information rather than a traditional email communication. A site has been set up to display the companies Earth Week information and your requirement is to drive traffic to it.   


Create a full custom footer (image below) on the intranet that will animate in the first time employee’s navigate to the company intranet allowing them to quickly navigate to the new Earth Week site. After Employee’s click on the full banner only a small version of the footer (image below) will display.

Full Footer Image

Mini Footer Image

Technical Items covered in this tutorial:

Adding the following to a Master Page:

  • JQuery
  • Custom JavaScript
  • Custom CSS
  • Custom footer

How to:

  • Use JavaScript cookies
  • Invoke custom onload events
  • Hide custom CSS from dialog boxes
  • Cache custom files


1. I’ll make a copy of the v4 master page ( if you don’t already have a master page you want to add the footer to)

2. Select my new master page… Right click and Edit File in Advanced mode

3. I’ll add references to additional JavaScript files. I’m adding three references after the reference to core.js.

JQuery 1.7.2 (Go here to download file)

<SharePoint:ScriptLink language=”javascript” name=”/_layouts/custom/jquery-1.7.2.min.js” runat=”server”/>

This will give me the ability to animate the footer. JQuery offers a lot more functionality. Take a look at the JQuery site so see more options.

JQuery Cookie (Go here to download file)

This is a library based on JQuery to work with cookies more easily than with straight JavaScript.

Note: It will need to follow the JQuery reference since it depends on JQuery

<SharePoint:ScriptLink language=”javascript” name=”/_layouts/custom/jquery_cookie.js” runat=”server”/>

My custom JavaScript

This is where I’ll place all my custom JavaScript (javascript file below). I chose to put my file in the layouts folder because it will be cached. My file is small and shouldn’t cause a performance hit, but this is something to consider for other development efforts with large JavaScript files. Other caching methods exist. You’ll just need to research the right approach for your situation.

<SharePoint:ScriptLink language=”javascript” name=”/_layouts/custom/custom.js” runat=”server”/>

4. Next I’ll add a reference to our custom CSS

My Custom CSS reference

<SharePoint:CssRegistration name=”” After=”corev4.css” runat=”server”/>

5. Now I need to add the custom the footer to the master page. The custom footer is made up of three div tags. Two the of the div tags show the full footer and words displayed the first time you open the site. The third div tag displays the small version that employee’s see after the cookie is stored indicating that the full footer has already been clicked.

My custom footer

<div id=”custom-footer-words” onclick=”footerClick();”>   </div>

<div id=”custom-footer” onclick=”footerClick();”>   </div>

6. Now I’ll define the custom CSS  file.

Please note all the div tags have diplay:none as the default. JQuery is used to show/hide the correct div’s with an onload event that will be defined in our custom Javascript.

My Custom CSS defined









background:transparent url(‘/el/custom/footer.png’) repeat-x scroll left top;

cursor: pointer;









cursor: pointer;











background:transparent url(‘/el/custom/words.png’);

cursor: pointer;



7. Now add the custom JavaScript














My Custom JavaScript defined

/*add custom function to onload*/


/*create cookie when user clicks big footer  and navigate to another site */

function footerClick() {

$(‘#custom-footer’).fadeOut(‘slow’,function() {});

$(‘#custom-footer-words’).fadeOut(‘slow’,function() {});

$(‘#custom-mini-footer’).fadeIn(‘slow’,function() {});

/*Send Users to your Earth Week info */‘;)

$.cookie(‘EWCookie’, ‘EW’, { expires: 7 });


/* allow the mini footer to direct users to the earth week site */

function goSignClick() {

/*Send Users to your Earth Week info */‘;)


/* this is the onload function that checks if    a user already has a cookie so we display    the correct version */

function footerCheck() {

if ($.cookie(‘EWCookie’) == “EW”) {

$(‘#custom-mini-footer’).fadeIn(‘slow’,function() {});

} else {

$(‘#custom-footer’).fadeIn(‘slow’,function() {});

$(‘#custom-footer-words’).slideDown(‘slow’,function() {});



That’s all you’ll need minus the images to add your own custom footer. Hopefully this tutorial saves you some time or gives you some ideas.

8 Free Master Pages wrapped in a one wsp solution

Found this while I was looking for free master pages. It works with Foundation too…

SharePoint 2010 – HTML 5 Master Page

Here’s a great HTML 5 master page…


SharePoint 2010 Branding… three free themes

Found this site that has three free themes which each include a master page and a few page layouts. These look like a great starting point if you are looking to change that OOTB look.

Pretty much the only way you should deploy a custom master page

Rounded Corners in SharePoint 2010

I found a lot of posts on how to achieve rounded Web Parts corners in SharePoint 2007, but they didn’t work in 2010 due to some changes. I also found some posts on how to do this in 2010, but the approaches weren’t clean. Finally I found the approach below. It’s the cleanest approach I found. Plus the step-by-step is very detailed…

SharePoint Branding Project in Visual Studio

Here’s a great tutorial that shows you how to set up a branding project that can be activated as a feature.

My Site Branding Project

I found a project on codeplex that allows you to customize the branding of my sites. It’s great because it’s just a wsp that is activated wherever your my site is hosted. It’s a great start for anyone looking to change the look and feel of My Site.

Easy Font Replacement that works with SharePoint 2010

Here’s a link to a blog with the “How-to” and a link to the site to create your js files to do the font replacement.

Blog –>

Site –>