Custom SharePoint 2010 Branding

In this article, I would like to share my experience in applying custom branding for SharePoint 2010. Below is the step by step guide to create custom branding in SharePoint 2010.

  1. Open Visual Studio 2010 > File > New Project > Empty SharePoint Project, enter the Project Name and Location. Then click OK.
    branding1
  2. In SharePoint Customization Wizard, Enter your local site URL and Select Deploy as sandboxed solution. Then click Finish.
    branding2
  3. Right click on the project in Solution Explorer, then select Add > New Item > Module. Then enter the Module Name is MasterPage.
    branding5
  4. Remove sample.txt from MasterPage module and add clean SharePoint 2010 master page from codeplex. Then rename the master page file to MyMasterPage.master
  5. Update Elements.xml in MasterPage module.
    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <Module Name="MasterPage" Path="MasterPage" Url="_catalogs/masterpage">
        <File Url="MyMasterPage.master" Type="GhostableInLibrary" >
          <Property Name="UIVersion" Value="4" />
          <Property Name="ContentTypeId" Value="0x010105" />
        </File>
      </Module>
    </Elements>
    
  6. Right click on the project in Solution Explorer, then select Add > New Item > Module. Then enter the Module Name is Style Library. Create Folders structure to be like below and Add files required like images, java scripts and css.
    branding3
  7. Update Elements.xml in Style Library module.
    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <Module Name="Style Library" Path="Style Library\MyCustomBranding" Url="Style Library/MyCustomBranding">
        <File Path="MyCustomStyle.css" Url="MyCustomStyle.css" />
        <File Path="Scripts\jqFancyTransitions.1.8.min.js" Url="Scripts/jqFancyTransitions.1.8.min.js" />
        <File Path="Scripts\jquery-1.8.1.min.js" Url="Scripts/jquery-1.8.1.min.js" />
      <File Path="Images\Logo.jpg" Url="Images/Logo.jpg" />
    </Module>
    </Elements>
    
  8. Add Event Receiver to your MyCustomBranding Feature to apply custom branding, alternative css and logo when feature activated. Also, revert back to default when feature deactivating.
    using System;
    using System.Runtime.InteropServices;
    using System.Security.Permissions;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.Security;
    
    namespace MyCustomBranding.Features.MyCustomBrandingFeature
    {
        ///
    /// This class handles events raised during feature activation, deactivation, installation, uninstallation, and upgrade.
        ///
        ///
        /// The GUID attached to this class may be used during packaging and should not be modified.
        ///
    
        [Guid("27a7158e-9b23-48d3-bc77-0b33345a71cb")]
        public class MyCustomBrandingFeatureEventReceiver : SPFeatureReceiver
        {
            public override void FeatureActivated(SPFeatureReceiverProperties properties)
            {
                SPSite siteCollection = properties.Feature.Parent as SPSite;
                if (siteCollection != null)
                {
                    SPWeb topLevelSite = siteCollection.RootWeb;
    
                    // Calculate relative path to site from Web Application root.
                    string WebAppRelativePath = topLevelSite.ServerRelativeUrl;
                    if (!WebAppRelativePath.EndsWith("/"))
                    {
                        WebAppRelativePath += "/";
                    }
    
                    // Enumerate through each site and apply branding.
                    foreach (SPWeb site in siteCollection.AllWebs)
                    {
                        site.MasterUrl = WebAppRelativePath + "_catalogs/masterpage/MyMasterPage.master";
                        site.CustomMasterUrl = WebAppRelativePath + "_catalogs/masterpage/MyMasterPage.master";
                        site.AlternateCssUrl = WebAppRelativePath + "Style%20Library/MyCustomBranding/MyCustomStyle.css";
                        site.SiteLogoUrl = WebAppRelativePath + "Style%20Library/MyCustomBranding/Images/Logo.jpg";
                        site.UIVersion = 4;
                        site.Update();
                    }
                }
            }
    
            public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
            {
                SPSite siteCollection = properties.Feature.Parent as SPSite;
                if (siteCollection != null)
                {
                    SPWeb topLevelSite = siteCollection.RootWeb;
    
                    // Calculate relative path of site from Web Application root.
                    string WebAppRelativePath = topLevelSite.ServerRelativeUrl;
                    if (!WebAppRelativePath.EndsWith("/"))
                    {
                        WebAppRelativePath += "/";
                    }
    
                    // Enumerate through each site and remove custom branding.
                    foreach (SPWeb site in siteCollection.AllWebs)
                    {
                        site.MasterUrl = WebAppRelativePath + "_catalogs/masterpage/v4.master";
                        site.CustomMasterUrl = WebAppRelativePath + "_catalogs/masterpage/v4.master";
                        site.AlternateCssUrl = "";
                        site.SiteLogoUrl = "";
                        site.Update();
                    }
                }
            }
        }
    }
    
    
  9. We have to apply branding when user create a sub site, so we need to create event receiver when web provisioned. Right click on the project in Solution Explorer, then select Add > New Item > Event Receiver. Then enter the Event Receiver Name is ChildSiteInit.
    branding6
  10. In SharePoint Customization Wizard, Select Web Events for event receiver type and A site was provisioned for the event source.
    branding8
  11. Override WebProvisioned method in ChildSiteInit.cs.
    using System;
    using System.Security.Permissions;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.Security;
    using Microsoft.SharePoint.Utilities;
    using Microsoft.SharePoint.Workflow;
    namespace MyCustomBranding.ChildSiteInit
    {
        ///
    /// Web Events
        ///
        public class ChildSiteInit : SPWebEventReceiver
        {
           ///
    /// A site was provisioned.
           ///
           public override void WebProvisioned(SPWebEventProperties properties)
           {
               SPWeb childSite = properties.Web;
               SPWeb topSite = childSite.Site.RootWeb;
               childSite.MasterUrl = topSite.MasterUrl;
               childSite.CustomMasterUrl = topSite.CustomMasterUrl;
               childSite.AlternateCssUrl = topSite.AlternateCssUrl;
               childSite.SiteLogoUrl = topSite.SiteLogoUrl;
               childSite.Update();
           }
        }
    }
    
  12. Set Feature Scope to Site and move all modules to be included in the Feature.
    branding4
  13. Build and Deploy the solution.

Results

branding7

References

Advertisements

Tagged: , , , , , ,

One thought on “Custom SharePoint 2010 Branding

  1. […] Ensure jQuery and jqFancyTransitions plug-ins added to your master page, I’ve showed how to add it in previous article about Custom SharePoint 2010 Branding. […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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: