Customizing the masterpage in sharepoint 2013

Step1:

Finally the whole html page will set as master pages for your port

http://win-3qppuudegcm50_layouts15ChangeSiteMasterPage.aspx

Step2:

Now you have to seprate the

                     1. Header - comes from master page

                     2.Content area  - comes from pagelayouts

                     3.Footer - comes from master page

to Edit the master page  u have to install SharePoint designer 2013



 Step3:

 Open sharepoint 2013  - > click Opensite -> give your port url

http://win-3qppuudegcm50

 Step3:

All files will be open in the sharepoint designer  screen below:

 Step4:

Go to all files ->  style library ->  Create a new folder name ( Ex dog food)

 Step5:

Create folder ->  css, images and js import file in  related folders

 Step6:


Check in  all the files (if its ticked it means check-out if its not ticked is check-in)

You have Check-in,check-out and undo check out  menu tabs

 Step7:

Check in all the files-> Right click  and check-in

Step8:

Go to master page  -> html design -> index.master - edit file -> (may be)  it will ask for check out

change the path of the css, images and js files- >Style library/Dogfood/css/base.css %>

 Step9:

Remove the  html Content area now u will See the  below screen in your team site

Step10:

 Now If u open the Team site U can find the Controls will be misaligned like share your site, working on a


 deadline etc...So you  have to edit the index.master in sharepoint designer -> container div have to close

within this control

Note:

( one of the closing div end after the control so u have to make sure  that  closing div should be

close within the share point control)

<div data-name="ContentPlaceHolderMain">                   
                   
                    <SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
                        <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
       
                            </div>
                        </asp:ContentPlaceHolder>
                    </SharePoint:AjaxDelta>

    </div>

Step11:

 Now If u  will finally output  Team site  is aligned properly with your master page

Step12:

Enjoy Folks