A Practical Guide to SharePoint 2013

A Practical Guide to SharePoint 2013
A Practical Guide to SharePoint 2013 - Book by Saifullah Shafiq

Tuesday, May 20, 2014

SharePoint Branding Part 3

1.      Save the master page and preview it in browser to test your changes. Now, we will create the first page of the site, index page.

2.      Go to Site Actions > Site Contents and select Pages library.

3.      From the FILES tab at the top, select New Document. Enter Title and Description, for example, for home page, enter Home in the Title box and enter Home Page in Description box. Enter default in the URL Name. Select Full page in the Page Layout section and click Create button.

4.      Click on default page you just created to open it. Click EDIT link in the top right corner. In the middle of the page, you will see Page Content area. This is the place where you will copy the content stored in the contentarea.txt file (or from the clipboard if you did not store it in the text file). Click Edit Source button in the ribbon. Copy the content in the Page Content area. Preview the page. You will notice that images are missing. This is because the image paths are incorrect in the content you pasted. Click the Edit Source button in the ribbon. Notice the image path, it points to the images folder inside Pages library. This is not where you have your images. You can either move your images to the location used in the content or you can change the path in the content to where you have stored your files. Let’s use the second option. Replace /Pages/images with /_catalogs/masterpage/social/images. Save the changes and preview the page. It looks good now, isn’t it?

5.      Open the master page again in Edit mode and locate <div data-name="ContentPlaceHolderMain">. Add style=”text-align: center;” in the tag to center-align the content area to match our template. Updated tag will look like this:
 <div data-name="ContentPlaceHolderMain" style="text-align: center;">
</div>

6.      Now, you will create the remaining pages for the site. Refer to the instructions above to create new pages. Create a new page and name it Aboutus. Edit it and paste following code in the Page Content area (Use Edit Source button in the ribbon to switch to code view):
<div class="fullwidth slider_bg">
        <div class="main_wrapper">
                        <div class="inner_wrapper">
                                        <div class="slider">
                        <img src="/_catalogs/masterpage/social/images/aboutus.png"  width="100%"/>   
            </div>
        </div>
     </div>
</div>

<div class="main_wrapper">
            <div class="inner_wrapper">
                <div class="content">
                    <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>
    </div>

</div>


Listing 12-2: About Us page content

Save and Publish the page.


Figure 12-8
: About Us

Create Services page (services.aspx) and paste following code in the Page Content area:


<div class="fullwidth slider_bg">
                <div class="main_wrapper">
                                <div class="inner_wrapper">
                                                <div class="slider">
                <img src="/_catalogs/masterpage/social/images/services.png"   width="100%"/>   
            </div>
        </div>
     </div>
</div>

<div class="main_wrapper">
            <div class="inner_wrapper">
                <div class="content">
                    <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>
    </div>

</div>


Listing 12-3: Content for Services page

Create page called Resources (resources.aspx) and paste following code in the Page Content area:


<div class="fullwidth slider_bg">
                <div class="main_wrapper">
                                <div class="inner_wrapper">
                                                <div class="slider">
                <img src="/_catalogs/masterpage/social/images/resources.png"  width="100%"/>   
            </div>
        </div>
     </div>
</div>

<div class="main_wrapper">
            <div class="inner_wrapper">
                <div class="content">
                    <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>
    </div>

</div>


Listing 12-4: Content for Resources page

Create page called ContactUs (contactus.aspx) and paste following code in the Page Content area:


<div class="fullwidth slider_bg">
                <div class="main_wrapper">
                                <div class="inner_wrapper">
                                                <div class="slider">
                <img src="/_catalogs/masterpage/social/images/contactus.png" width="100%"/>   
            </div>
        </div>
     </div>
</div>

<div class="main_wrapper">
            <div class="inner_wrapper">
                <div class="content">
                    <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>
    </div>

</div>


Listing 12-5: Content for ContactUs page

That is it! We have created all the pages.

Part 1
Part 2
Part 4

Part 5