Deploy SharePoint Branding as a Farm or Sandbox Solution
Description: We know that every company wants their own brand colors in their internal or external web sites. SharePoint provides some theme collection, but those themes never fit for most of the companies. Here branding plays a major role in the SharePoint.
What is Branding: Development of themes for SharePoint Sites is known as Branding. In Simple words, Web Designing in SharePoint they name it as Branding.
What to Know : To start the Branding (web designing), you must familiar with CSS, and HTML. One most important thing you need to know about Master page and Content Place Holders in Master Page.
Step 1: Open the SharePoint designer and then open the any site.
Step 2: Click on Master Pages
Step 3: Select the v4.master page and click on Export File option in top Ribbon of the SharePoint Designer. Save the file into your project folder.
Step 4: Open Visual Studio. Note: open Visual with Administrator permissions
Step 5: Click on New Project
Step 6: Please select Empty SharePoint 2010 project template from the templates of the visual studio. So visual studio will automatically create a file structure for us to deploy the solutions in Sharepoint server.
Name the Project as: SPLessonsBranding And click on ok button.
Step 7: SharePoint Customization Wizard: Here we need to enter the site where we want to deploy our solutions. We can check the site is available or not, by click on Validate button. We need to specify the trust level of the solution: Sandboxed or Farm Solution. Here in my example i have chosen the Farm solution and click on Finish
Note:
Sandboxes Solutions: All the solution related files will save into the content database of the SharePoint.
Farm: All the solutions related files will save into the file system on the Sharepoint server.
Step 8: We need to add the new module item to our project. So Right click on the project SPLessonsBranding and Select Add option and then select New item.
Step 9: Select the module item and name it as SPMasterPage and click on add button.
Once the new module is added to our project, it add’s a new feature to features of the project and an Elements.xml file and Sample.txt file.
Note:
1) Elements.xml file: It’s a manifest file here we can specify our master page name, and where it need save on the SharePoint server. Eg: _catlog/master pages
2) We are going to use the Sample.txt file as a master page. First Rename the Sample.txt file into SPBranding1.master
Step 10: Now we need to copy the content of the v4.master page. Open the v4.master file ( which we have saved in the Step 3 ) with any editor tools, i used the visual studio to copy all content of v4.master page and past it into our SPBranding1.master page of our SharePoint project SPLessonsBranding.
Step 11: If you want to add Layouts folder to your project you can add by right click on a project and then select the add -> Sharepoint ‘Layout’ Mapped folder. We can use the Layout folder to store our custom css, images, and js file it’s up to you, but anyhow I am going to add my css and images as a separate module so that our css files will available in Sandbox solutions also.
Step 12: Rename the Feature1.feature to MainFeature1.feature in the Features folder of our project for our convenience.
Step 13: Now it’s time to set the scope of our solutions: Double click on MainFeature1.feature
Select the socpe: Site or Farm
Note:
1) If you want to deploy the solution as Sandbox solutions you need to change the default scope of our module ( SPMasterPage Module) from Farm to Site because Sandbox solutions most be deployed as site scope.
2) If you want to deploy the solution as Farm solution you not need to change the default scope of your module ( SPMasterPage Module)
Step 14:
Last Step for the masterpage is we need to specify to where our custom master page need to save in the Sharepoint. The location is _catlog/MastePages of SharePoint site.
We can specify it using Elements.xml file of our SPMasterPage module.
Replace the content of Element.xml
[xml] <?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="SPMasterPage"
Path="SPMasterPage"
Url="_catalogs/masterpage">
<File Path="SPMasterPage\SPBranding1.master"
Url="SPMasterPage/SPBranding1.master"
Type="GhostableInLibrary"
IgnoreIfAlreadyExists="TRUE">
<Property Name="Title" Value="SPLessons Master"/>
<Property Name="MasterPageDescription" Value="SPLessons Master"/>
<Property Name="ContentType" Value="$Resources:cmscore,contenttype_masterpage_name;" />
</File>
</Module>
</Elements>
[/xml]
Step 15: Now it’s time to Registor our css files as a new module. If you registor our css files as new module so that it will easily available even in Sandbox solutions.
Step 16: Right click on the project and select Add -> New Item
Step 17: Select the Module Item once again and name it as SPCustomCss and click Add button.
Step 18: Here we can add our css folder by just right click on SPCustomCss module and then Add -> New Folder. Rename to new folder to css.
Now rename the sample.txt file to customstyle.css file
Drag and drop the customstyle.css into css folder in solution area of visual studio.
If you want to add images folder you can add it to css folder.
Step 19: Add your custom css to customstyle.css
Step 20: Add our custom css file to our master page. Add the below tag to before end of the head tag of SPBranding1.master page.
[csharp]
<SharePoint:CssRegistration
name="<% $SPUrl:~sitecollection/SPCustomCss/css/customstyle.css %>"
After="corev4.css"
runat="server"
/>
[/csharp]
Finally, we have finished the registration of master page and css file as new modules. Now it’s time to deploy our solutions and test it out.
Test: Open your site in the SharePoint Designer and click on Master Pages there you will see you custom masterpage: SPBrading1.master.
In the Next tutorial I will explain you how to apply our custom theme whenever the feature activated, and revert back to the Sharepoint default theme once we deactivate the feature.
Comments