All About SharePoint: SharePoint Branding Part 5

Adding Sign-In

Here is another snippet that you can add in your master page. Sign In link is automatically displayed on your page in the upper left corner. You can customize the look and feel and change its position to display it anywhere you like. The Sign In snippet is a security trimmed control. You can add a new Sign In snippet and remove the one that is part of the master page by default or you can customize the one that is already on the page. Below we will look at both options. To add a new snippet, repeat the steps explained previously to add a snippet to the master and choose Sign In snippet. Copy the HTML to clipboard and return to the master page (in editor) and paste the snippet where you want it displayed and then remove the default snippet from the page. For your convenience, I am listing the steps again below:

1. Go to Design Manager and select Edit Master Pages link on the left side.

2. Click the HTML master page (index365.html).

3. Click the Snippets link in the top right corner.

4. Click Design tab.

5. Click Sign In snippet in the ribbon.

6. Click Copy to Clipboard button to copy the snippet HTML.

7. Paste the snippet to the master page at your desired location.

8. Locate following code in the master page and remove it. This is the default Sign In link code.

Listing 12-14: Default Sign In Link

Now, the second option is to re-use the default Sign In link. All you can do with it is add some style and change its location otherwise it works perfectly fine. Depending on the design of your site, you may want to put it in an appropriate location. To add styling to the Sign In link, you have to add a style class to the CSS and embed the code shown in the above listing within a div with that style class.

9. Locate the code shown in the previous listing and add <div class=”signin_btn”> before it and </div> after it. Updated code looks like this:

<div class="signin_btn">

</div>

Listing 12-15: Sign In Link

10. Now cut the whole snippet (as shown in the listing above) by pressing Ctrl+X (or Cut command from the context menu)

11. Locate following line in the master page and paste the code (from the clipboard) immediately after it:

Listing 12-16: Location of Sign In link

After moving the Sign In snippet to new location, code looks like this:

<div class="signin_btn">

</div>

Listing 12-17: Sign In link new location

By default, Sign In link appears in the top left corner. We have moved it to the right corner just above the Search box and have add some style to it. Class signin_btn is in the main.css and looks like this:

.signin_btn{
   float:right;
   font-size:12px;
   text-transform:uppercase;
   color:#49176d;
   margin-right:10px !important;
   margin-top:5px !important;
   padding:0;
   margin:0

}

.signin_btn span a {

display: inline;

float: right;

line-height: 0 !important;

margin-bottom: -19px;

margin-left: 0 !important;

margin-right: 0 !important;

margin-top: 9px;

padding: 0 !important;

}

Listing 12-18: Sign In link styling

Publishing the site

Now, you are reading to publish the site. Publishing the site is not difficult but there are several small steps that must be completed before the site is published.

1. Go to Site Actions > Site Settings > Design Manager and click Publish and Apply Design link on the left side. In the first paragraph, second line, there is a link Go to the Master Page Gallery, click it.

2. Go to social folder. You will see four subfolders: css, fonts, images, js and five or six files. Go to each folder one by one and publish all the files within each folder. On the root folder (social), publish the master page (index365.html). I will show you how you can publish the master page. Follow the same procedure to publish all other files in all folders. Hover mouse over index365.html and click the down-arrow that appears to open

the menu, and select Publish a Major Version. Add some comments in the Comments box and click OK.

Final Steps

Final steps include setting up the navigation links (in header and footer), adding facebook and twitter links in the footer, setting up SEO, page titles, and so on.

1. From the mapped drive, open master page in an editor.

2. Change page names in the navigation (menu2 – see below).

Figure 12-16: Page names

3. Replace index.html with ../../../Pages/default.aspx, about-us.html with ../../../Pages/aboutus.aspx, services.html with ../../../Pages/services.aspx, resources.html with ../../../Pages/resources.aspx, contactus.html with ../../../Pages/contactus.aspx. Note that new pages are located in the Pages library and master page is located in the _catalogs/masterpage/social folder, therefore, you have to give correct path to access the pages.

4. Locate <div class="menu_footer"> and replace page names with new ones under this tag. Replace index.html with ../../../Pages/default.aspx, about-us.html with ../../../Pages/aboutus.aspx, services.html with ../../../Pages/services.aspx, resources.html with ../../../Pages/resources.aspx, contactus.html with ../../../Pages/contactus.aspx.

5. In the same footer tag, there are Twitter and LinkedIn icons, add URL to your accounts in the href (Replace # sign with the URL).

Figure 12-17: Social media links

6. Locate <div class="social_icons"> tag and add URL to your Twitter and LinkedIn account in the href (replace # with the URL).

Figure 12-18: Social Icons

7. Save your changes and re-publish the master page. All your links should be working now.

8. Open home page in browser. Click SITE tab and click Edit Title button in the ribbon. If you have not already set Title and Description, add them now in the Title and Description boxes and click Ok.

9. Click Change Logo button and provide path to the logo. You can upload logo from the computer or select it from the SharePoint site if you already have it up there.

10. Clic Edit Properties and select Edit SEO Properties.

Figure 12-19: SEO Properties

11. Title field should already be populated. Title comes from the page’s title tag. If you want to change it, you can change it on this page. This it the title that search engines use in their search results. To change Browser Title, enter a title in the Browser Title field. This is the title that appears in the title bar of the browser. Meta Description field contains the description of your page. Search engines display this description under your link in the search results. Make sure the description is concise and meaningful and contain some of your keywords. In the Keywords field, add keywords that are relevant to your home page. Keywords are comma-separated and you can add a maximum of 1024 characters in this field. Finally, you can choose to include this page in the sitemap and expose it to the search engines. If you do not wish to include this page in the sitemap, choose Exclude from sitemap and hide from Search Engines otherwise keep the first option selected. Click Ok to save the changes. Repeast the process for all other pages.

12. Go to Site Actions > Site Settings > Welcome Page. Click Browse button and locate your default page in the Pages library and click OK. With this step, you have set your site’s homepage. Users now don’t have to type complete URL in the browser, they just enter the domain name and home page automatically loads.

13. Final step is to make the website available to the world. In the top right corner, under the Suite Bar, there is a button called MAKE WEBSITE ONLINE. Click this button, enter comments and click OK. That’s it. Your website is now live. Wait for a few seconds for the settings to take effect. Logout and close browser. Open your website again in a new browser and you will see your site up and running. Do the final checks and if something has been left, login and fix it. Start promoting your site and generate traffic. SharePoint public site is a goldmine for small businesses as you get all useful features like document management, meetings and events scheduling, email management, contacts management, tasks management and so on with your public website that acts as an informational brochure and introduces your business to the world. It is an affordable solution for small businesses that do not want to spend extravagantly on the development of such a useful website that can actually play a role in the promotion and management of their business. SharePoint Online is also available for medium and large sized businesses. If you are an enterprise, buy an enterprise package. It is still cheaper than hosting a site inhouse because the infrastructure and hardware costs are quite high and then you also need resources to handle and maintain your site(s). With a hosted solution, you can handle the day to day tasks yourself or at most you need one administrator to keep the site in good health.

Part 1
Part 2
Part 3
Part 4

All About SharePoint

A Practical Guide to SharePoint 2013

Saturday, May 31, 2014

SharePoint Branding Part 5

Adding Sign-In

Publishing the site

Final Steps

No comments:

Post a Comment