Sue Hernandez's SharePoint Blog

SharePoint and Related Stuff

Branding SharePoint 2010 using JQuery

Well, it’s been a while since I’ve written – it’s hard to get out of the weeds sometimes.   This time I had a need to “brand” a SharePoint 2010 site by applying styles “at the last second.”  Now this methodology could be argued against – I’m not talking about writing your own CSS and applying it to the Master Page.  This is on-the-fly style application, making sure that it’s the last style applied.

Our first step is to figure out a way to store and retrieve these settings per site.  The way I did it was to create a lightweight class, inside of a Custom SharePoint 2010 Web Service, that gets persisted to the database.  Why a web service?  Well you can call a web service from your Master Page without having to add something custom coded, for instance using Visual Studio 2010.  You can actually call the web service using JQuery.  One thing to note with this persistance is that you should store the full URL to the site, and use that to store and retrieve the data.  I originally did it by GUID but found that GUIDs for SPWebs are not unique across separate Site Collections – usually due to a backup/restore or migration using a custom tool.

Writing a custom SharePoint Web Service for 2010 is beyond the scope of this blog post, but there are many good articles out there that will help you get started.  A couple of hints, though, when you write this web service for 2010:

  • Your project references need to include System.ServiceModel and System.ServiceModel.Web
  • Your Interface needs   [OperationContract] and [WebInvoke(UriTemplate = “/YourMethodName”, Method = “GET”, BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
  • Your instance needs [BasicHttpBindingServiceMetadataExchangeEndpointAttribute] and
     [AspNetCompatibilityRequirementsAttribute(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
  • Your .svc file needs the Factory to be Microsoft.SharePoint.Client.Services.MultipleBaseAddressWebServiceHostFactory

Our next step of course is to modify the existing Master Page – v4.master to be exact.  However, it is always said that you should never modify the master, you should make a copy of it and use the copy.  However you want to do it, we’re simply going to add a few lines of HTML and a reference to a Javascript file, so it’s a very small footprint.

First off, in the Head section of the Master Page, add a script link to JQuery (you can put it in your Layouts directory under a custom sub-folder – deploy it along with the web service as a WSP package) and add a link to your custom Javascript file (also deployed to Layouts).  At the top-ish of the body section of the Master Page, right underneath <SharePoint:SPNoScript runat=”server” /> put a script tag as follows:

<script type="text/javascript">
var siteURL = _spPageContextInfo.webServerRelativeUrl;
if (siteURL == '/') {
 siteURL = '';

var date = new Date();
// -->

What this does is uses a SharePoint script variable to reference the web site’s relative URL.  We’ll need this when we ask for the Web Service.

Toward the bottom of the master page, right before the div that is above the developer dashboard, add in the following script:

<script type="text/javascript">
// Set up the page Styles
// -->

Your GetStyles method will be an Ajax call using JQuery, calling your custom web service.   Use the lightweight class in Javascript basically just like you would in code – brandingObj.RibbonTextFont.FontColor – for example.  

function GetStyles() {
 // Branding
 try {
   async: false,
   url: siteURL + "/_vti_bin/Custom/YourService.svc/GetSiteBranding?Date=" + date,
   type: "GET",
   dataType: "json",
   processData: true,
   success: function (xData) {
    try {
     brandingObj = xData;
    catch (ex1) {
     alert("Error: " + ex1);
   error: function (result, status, error) {
   contentType: "application/json; charset=\"utf-8\""
 catch (ex) {
  alert("Error: " + ex);

And your SetStyles function is where you actually apply the styles.  Here are some examples of what you can brand, using hard-coded colors instead of using the JSON object:

// Ribbon Text
$('.ms-cui-ribbonTopBars').find('.ms-menu-a').css({ 'color': 'White' });

// Top Ribbon Banner:  NOTATION - it is not advisable to set this to a light color as the Ribbon Tabs wil not be visible
$('body #s4-ribbonrow').css({ 'background-color': 'Firebrick' });

// Background Banner - Background Color
$('.s4-title').css({ 'background-color': 'Brown' });

// Background Banner - Image
$('.s4-title').css({ 'background': 'url(' });

// Header Site Image (Small image next to Title)
$('img[name='onetidHeadbnnr0']').attr('src', '');
$('img[name='onetidHeadbnnr0']').css({ 'height': '32px' });
$('img[name='onetidHeadbnnr0']').css({ 'width': '32px' });

// Page Header Text (Title)
$('.s4-titletext H2').css({ 'color': 'White' });
$('.s4-titletext').css({ 'color': 'White' });
$('.s4-titletext A').css({ 'color': 'White' });

// Page description Text
$('.s4-pagedescription').css({ 'color': 'White' });

// Top Link Bar (Tab Bar)
$('.s4-tn').css({ 'background-color': 'Firebrick' });

// Unselected Tabs in Top Link Bar
$('.s4-tn').find('li.static').find('A').css({ 'color': 'White' });

// Selected Tab in Top Link Bar
$('.s4-toplinks').find('.s4-tn').find('A.selected').css({ 'color': 'White' });

// Selected Tab in Top Link Bar - Background
$('.s4-toplinks').find('.s4-tn').find('A.selected').css({ 'background-color': 'Firebrick' });

// I Like It and Notes
$('.ms-socialNotif-text').css({ 'color': 'White' });

// I Like It and Notes - Hidden

// Search

// Help

// Recycle Bin

// Quick Launch Background
$('#s4-leftpanel-content').css({ 'background-color': 'Brown' });

// Quick Launch Header Text
$('.ms-quickLaunch').find('li.static > A').css({ 'color': 'Yellow' });

// Quick Launch Item Text
$('.ms-quickLaunch').find('li.static > ul').find('A').css({ 'color': 'White' });
$('.s4-rcycl').css({ 'color': 'White' });

// Web Part Header
$('.ms-WPTitle').css({ 'color': 'Firebrick' });
$('.ms-WPTitle').find('A').css({ 'color': 'Firebrick' });

// Web Part Header Background
$('.ms-WPTitle').css({ 'background-color': 'Yellow' });
$('.ms-WPTitle').css({ 'padding-left': '3px' });
$('.ms-WPHeaderTdMenu').css({ 'background-color': 'Yellow' });
$('.ms-WPHeaderTdSelection').css({ 'background-color': 'Yellow' });

// Web Part Title Row
$('.ms-vh-div').css({ 'color': 'White' });
$('.ms-viewheadertr').find('A').css({ 'color': 'White' });

// Web Part Title Row Background
$('.ms-viewheadertr').css({ 'background-color': 'Brown' });
$('.ms-vh').css({ 'background-color': 'Brown' });
$('.ms-vh2').css({ 'background-color': 'Brown' });

// Web Part Body
$('.ms-listviewtable').find('').css({ 'color': 'White' });
$('.ms-listviewtable').find('').find('A').css({ 'color': 'White' });
$('.ms-listviewtable').find('').find('A').css({ 'color': 'White' });
$('.ms-listviewtable').find('').find('A').css({ 'color': 'White' });

// Web Part Body Background
$('.ms-listviewtable').find('').css({ 'background-color': 'Brown' });
$('.ms-listviewtable').find('').css({ 'background-color': 'Brown' });
$('.ms-listviewtable').find('').css({ 'background-color': 'Brown' });
$('.ms-listviewtable').find('').css({ 'background-color': 'Brown' });
$('.ms-listviewtable').find('').css({ 'background-color': 'Brown' });
$('.ms-listviewtable').find('').css({ 'background-color': 'Brown' });

Now don’t take the colors I put in here at face value – I was just picking colors out of a hat.  I.e. don’t take this as “good design” colors cause it’s not.

Also, another trick if you want to style or hide the “All Site Content” link, all you have to do is in the Master Page, find the component with an ID of “idNavLinkViewAllV4″.  Add an attribute in there such as CssClass=”customViewAllSiteContent” and then in your JQuery all you have to do is reference that class.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: