Sharepoint branding step by step – part 2

In a previous article I wrote about a custom master page and how to make SharePoint branding. Also when we work with SharePoint Online (Office365). But there’s something more… Microsoft gives us more possibilities, which can be used to extend the functionality of our page. Let’s move to the design manager. On “Edit Master Page” page press the link „Conversion successful” for our master page. We will be transferred to the preview page. We can see there how our main page will be looking when we use our custom master page.

Edit Master Page
Edit Master Page


It’s time to the next step. When we press “Snippets” in the upper menu we will open a new page where we can make some additional improvements to our master page. From the left we can see:

– Navigation – we can add additional navigation to our page

– Administration – some additional administration features

– Containers – containers for our features

– Web Parts – it’s just webparts

– Custom ASP.NET markup – if you need something fancy you can use it to create something nonstandard

Snippet Gallery
Snippet Gallery

Ok, It’s time to show you how can use snippets to build something more than just simple master page. I will show you how we can make conditional display of the interface base on user permissions. From upper menu we select Security Trim -> Show to Authenticated Users.

Security Trim
Security Trim

SharePoint will display detailed options of this feature, and the preview window will display how our snippet works. HTML snippet contains source code which should be used to get expected results. Right now we are interested in Customization – Security Trim. When we change the setting of the snippet we can modify his behavior. We will select from the menu AuthenticationRestrictions option AuthenticatedUsersOnly. It means that only users who were authenticated will be taken into account. Then from the Permissions drop down we should select ApproveItem. This second option allows seeing content only by users with Approve Item permissions.

ApproveItems Permissions
ApproveItems Permissions

In additions we can also modify how snippets will be displayed on the screen: border, background colour, etc. When we done our configuration work we press Update button to update code in html snippet windows. Then we can copy our code to clipboard with Copy to Clipboard button.

Security Trim Details
Security Trim Details

It’s time to use SharePoint designer. Let’s open our master page. Please remember that we still work with html file, not .master. Let’s find following code:


<div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>

<!--PE: End of READ-ONLY PREVIEW -->
        </div>

This code is responsible for generating upper ribbon on the page.  We are going to paste snippet code above ribbon code, and then we move ribbon code into snippet div’s. When we finish our code should looks like this:


<div data-name="SecurityTrimmedAuthenticated">
    <!--CS: Start Security Trim Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" Permissions="ApproveItems">-->
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span><!--PE: End of READ-ONLY PREVIEW-->

<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">

<div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>

<!--PE: End of READ-ONLY PREVIEW -->
        </div>

        </div>

        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--></span><!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
    <!--CE: End Security Trim Snippet-->
</div>

It’s time to save our work. And that’s all. Your simple Sharepoint branding is in place. Share Now when used will display page he will be able to see ribbon only if he has valid permissions. It’s an only a simple example of how snippets work, but the idea of how to use others is very similar. There’s much more than this – you should make your own tests.