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.
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server"
AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server"
EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
|
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">
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server"
AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome
runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
</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:
<div class="main_wrapper"
xmlns="http://www.w3.org/1999/xhtml">
|
Listing 12-16: Location of
Sign In link
After moving the Sign In snippet to new location, code looks like this:
<div class="main_wrapper"
xmlns="http://www.w3.org/1999/xhtml">
<div
class="signin_btn">
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server"
AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome
runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
</div>
<div
class="inner_wrapper">
<div
class="logo">
|
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).
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 1Part 2Part 3
Part 4
.jpg)
