Monthly Archives: June 2012

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.   

Solution:

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

Steps:

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

div#custom-footer

{

display:none;

position:absolute;

bottom:0;

left:0;

width:99%;

height:100px;

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

cursor: pointer;

color:#fff;

}

div#custom-mini-footer

{

display:none;

position:absolute;

bottom:0;

left:0;

cursor: pointer;

color:#fff;

}

div#custom-footer-words

{

display:none;

position:absolute;

bottom:100px;

right:0;

width:884px;

height:39px;

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

cursor: pointer;

color:#fff;

}

7. Now add the custom JavaScript

 

 

 

 

 

 

 

 

 

 

 

 

 
 

My Custom JavaScript defined

/*add custom function to onload*/

_spBodyOnLoadFunctionNames.push(“footerCheck”);

/*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 */

window.open(‘http://www.emmettlynch.com&#8217;)

$.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 */

window.open(‘http://www.emmettlynch.com&#8217;)

}

/* 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…

http://www.riolinx.com/en/blog/Lists/Posts/Post.aspx?ID=25