Site Loader

I’ve been asked to create a simple static site on SharePoint. The requirements were to create a site without any SharePoint features. It seems easy to me.
First I started to look what I have and what SharePoint can offer me.
I started with creating a subpage called Test Site to create and test all changes here before I update the original site page.
01
On the Site Settings exists nice section: Look and Feel. This section has a lot of things to do with SharePoint sites appearance. But there was one link that I liked the most: Master page. So why not use something what I know well?
03
 
Site Master Page Settings using only existing master pages to change the appearance of our website, but from this content not allow to create new, custom master page.
03-1
To create a new master page, I used Design Manager. To access the Design Manager you need to have a full control to the Main Site Collection. Design Manager offers a lot of things that I could use. But because I wanted to create a new master page, I choose: Edit Master Pages
04
Edit Master Pages can be converted from HTML file or can create a minimal master page. But I was not sure if this could help me to create a simple master page.
05
With help, came to me SharePoint Designer 2013.
06
SharePoint Designer 2013 is an easy way to connect to SharePoint and change or create a lot of objects.
07
I created a Blank Master Page called Test.master
10
The blank template for the master page looks as shown below:

<%@ Master Language="C#" %>
<html dir="ltr">
<head runat="server">
<title>Untitled 1</title>
<asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
</form>
</body>
</html>

And after a project is saved, two tags are added automatically:

<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<SharePoint:RobotsMetaTag runat="server"></SharePoint:RobotsMetaTag>

I added some customization:

  • New CSS file
  • Div classes from CSS file
  • Asp: Content Place Holders
<%@ Master Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr">
<head runat="server">
    <SharePoint:RobotsMetaTag runat="server"></SharePoint:RobotsMetaTag>
    <title>Test site</title>
    <link href="../SitePages/css/main.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="main-container">
            <div class="header-container block">
                <asp:ContentPlaceHolder ID="HeaderContent" runat="server"></asp:ContentPlaceHolder>
            </div>
            <div class="left-container container block">
                <asp:ContentPlaceHolder ID="LeftContent" runat="server"></asp:ContentPlaceHolder>
            </div>
            <div class="middle-container container block">
                <asp:ContentPlaceHolder ID="MiddleContent" runat="server"></asp:ContentPlaceHolder>
            </div>
            <div class="right-container container block">
                <asp:ContentPlaceHolder ID="Right Content" runat="server"></asp:ContentPlaceHolder>
            </div>
        </div>
    </form>
</body>
</html>

When the master page was ready I used a Page From Master to create a new page based on my custom master page.
14
16
The Page (without any content) looks like shown below:
Code:
17
Page:
18-1
To update some content I added:

<asp:Content ContentPlaceHolderID="HeaderContent" runat="server">
<h1>Header Content</h1>
</asp:Content>
<asp:Content ContentPlaceHolderID="LeftContent" runat="server">
<h3>Left Content</h3>
</asp:Content>
<asp:Content ContentPlaceHolderID="MiddleContent" runat="server">
<h3>Middle Content</h3>
</asp:Content>
<asp:Content ContentPlaceHolderID="RightContent" runat="server">
<h3>Right content</h3>
</asp:Content>

And after that page looks like shown below:
18
 

Post Author: gosia

Leave a Reply