The official website of Bipul Raman

Customizing & Branding MasterPage in SharePoint Hosted App / Add-In

No comments

  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>
    
  • Change the master page name for your App Pages as below:
  • 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>
    
  • Add your custom css and js in ContentPlaceHolderID="PlaceHolderAdditionalPageHead"
  • Add your custom HTML body elements within ContentPlaceHolderID="PlaceHolderMain"

No comments :

Post a Comment