Customizing & Branding MasterPage in SharePoint Hosted App / Add-In
Posted by Bipul Raman on April 02, 2017.
Option 1: Set your own master page (for heavy customization & branding)
- Create your custom master page, ex- bipul.master
- Create a Module 'MasterPage' in your project to add the master page that you just created above
- Add your custom master page to this module
- modify the elements.xml in 'MasterPage' module as below and dont forget to replace your master page name in the code
<elements xmlns="http://schemas.microsoft.com/sharepoint/">
<module name="MasterPage">
<file path="MasterPage\bipul.master" type="GhostableInLibrary" url="_catalogs/masterpage/bipul.master"></file>
</module>
</elements>
MasterPageFile="~site/_catalogs/masterpage/bipul.master"
Option 2: Use default master page ( for light customization & branding)
- Add the below css in ContentPlaceHolderID="PlaceHolderAdditionalPageHead" to remove default headers and titles (SharePoint logo etc.) appearing in SharePoint Hosted app page
<style>
#suiteBarDelta, #s4-ribbonrow, #s4-titlerow{display: none !important;}
#contentRow{padding-top: 0px !important;}
</style>
by