All About SharePoint: SharePoint Branding Part 2

1. If you want to see how your site looks with this new design, apply the new master page to the site. First publish the master page. Go to Site Actions > Site Settings and click on Design Manager link. Click Edit Master Pages on the left side. Click ellipsis next to the index page to open the context menu.

Figure 12-5: Publish master page

Again click ellipsis to open the menu and select Publish a Major Version. Enter some comments in the Comments box, for example, the version number or date and click Ok.

2. Go to Site Actions > Site Settings and click Master Page. In Site Master Page section, from the Default drop down, select the new master page (social/index365). In Any Mobile Device drop down, select the new master page. Do the same in the System Master Page section. Make sure second option is selected and from All Channels drop down, select new master page. Expand Alternate CSS URL section and make sure third option is selected and then click Browse… button to locate main.css file in the Social/CSS folder. Click Ok to save the settings. If the css file is not published, you will be prompted to publish it first. Click OK to publish it. Once all the changes have been made, It is important to publish all files otherwise they won’t show up on the site. For now, you will see the files because you are in Edit mode but it is important to publish all files before making the site live. To publish, go to Social folder in Master Page Gallery and publish all files in all folders. For now, you can continue editing the site without publishing the files.

3. Preview the home page in browser. You should be able to see the site. There is a JQuery slider under the top menu. The search box is messed up. Menu links are slightly misaligned. This is how the page looks at this time:

Figure 12-6: Home page using the new master page

Now the master page has been created and the home page is up and running. Now in the next section we will edit the master page and add/edit page elements. We will also create the remaining site pages.

Completing the Design

So now you have a master page, next task is to clean it up. As mentioned earlier there are two ways to edit the master page. One is to disassociate it from the HTML page and then edit, the other is to edit the HTML page and that will automatically update the master page. You will choose the second option, that is, to edit the HTML page. You can edit it in SharePoint Designer or any other text editor. For example, for simple tasks I use Notepad++. You can also use Notepad if you want but obviously using SharePoint Designer is a better option since it gives you multiple views to edit the page. You get a code view, and a design view. So open the master page in the editor of your choice. To open it in SharePoint Designer, open SharePoint Designer and browse to the mapped network drive and click Open. Then from the Social folder, right-click index365.html file and select Check Out and then again open the context menu and select Edit in Advanced Mode.

You have three sections in the index file: Header, Content and Footer. Header section contains the logo, the search box, the navigation menu and a slider. Content area contains some dummy text and images. Footer contains the navigation menu and two icons, one for facebook and the other for twitter. First thing that you are going to do is remove the content from the content section in the master page and copy it to a text file. You will later add this content to the index page.

1. In the open master page, locate <div class=”fullwidth slider_bg” … tag. This is where the content area starts. Cut the text that starts with this tag and cover all the text until the footer div starts. Keep it on a clipboard or save in a text file. If you want to save it in a text file, save it as contentarea.txt. Full listing of the code that you need to remove from the master page and copy to the index page is given below:

<li>

</div>

</div>

<p class="fsize50 letterspacing2">Guide to

</p>

<p class="fsize90 letterspacing3 margint15">SharePoint 2013

</p>

</i>

</div>

<div class="button_text">Buy Now

</div>

</a>

</div>

</li>

<li>

</div>

</div>

<p class="fsize50 letterspacing2">Guide to

</p>

<p class="fsize90 letterspacing3 margint15">SharePoint 2013

</p>

</i>

</div>

<div class="button_text">Buy Now

</div>

</a>

</div>

</li>

<li>

</div>

</div>

<p class="fsize50 letterspacing2">Guide to

</p>

<p class="fsize90 letterspacing3 margint15">SharePoint 2013

</p>

</i>

</div>

<div class="button_text">Buy Now

</div>

</a>

</div>

</li>

</ul>

</div>

<h1>Lorem Ipsum</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

</div>

</div>

Listing 12-1: Content for the index page

2. Locate the div called ContentPlaceHolderMain. See figure below and notice the highlighted text. The outside div is called “ContentPlaceHolderMain”. Inside div is called “DefaultContentBlock”. Delete the inside div DefaultContentBlock as it is just a place holder. Cut the highlighted text (after deleting the inner div DefaultContentBlock) and place it just before the footer div (<div class="footer" xmlns="http://www.w3.org/1999/xhtml">).