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:

<div class="fullwidth slider_bg" xmlns="http://www.w3.org/1999/xhtml">                     <div class="main_wrapper">                         <div class="inner_wrapper">                             <div class="slider">                                 <ul class="bxslider">                                     <li>                                         <div class="banner_icon">                                             <img src="images/phone.png" width="100%" alt="" />                                         </div>                                         <div class="banner_content margintop50">                                             <div class="wali_logo">                                                 <img src="images/walisystems.png" width="100%" style="max-width:349px" alt="" />                                             </div>                                             <div class="banner_title white margintop50">                                                 <p class="fsize50 letterspacing2">Guide to                                                 </p>                                                 <p class="fsize90 letterspacing3 margint15">SharePoint 2013                                                 </p>                                                 <a href="#">                                                     <div class="button">                                                         <div class="icon">                                                             <i class="fa fa-shopping-cart fa-2x">                                                             </i>                                                         </div>                                                         <div class="button_text">Buy Now                                                         </div>                                                     </div>                                                 </a>                                             </div>                                         </div>                                     </li>                                     <li>                                         <div class="banner_icon">                                             <img src="images/i-pad.png" width="100%" alt="" />                                         </div>                                         <div class="banner_content margintop50">                                             <div class="wali_logo">                                                 <img src="images/walisystems.png" width="100%" style="max-width:349px" alt="" />                                             </div>                                             <div class="banner_title white margintop50">                                                 <p class="fsize50 letterspacing2">Guide to                                                 </p>                                                 <p class="fsize90 letterspacing3 margint15">SharePoint 2013                                                 </p>                                                 <a href="#">                                                     <div class="button">                                                         <div class="icon">                                                             <i class="fa fa-shopping-cart fa-2x">                                                             </i>                                                         </div>                                                         <div class="button_text">Buy Now                                                         </div>                                                     </div>                                                 </a>                                             </div>                                         </div>                                     </li>                                     <li>                                         <div class="banner_icon">                                             <img src="images/mac.png" width="100%" alt="" />                                         </div>                                         <div class="banner_content margintop50">                                             <div class="wali_logo">                                                 <img src="images/walisystems.png" width="100%" style="max-width:349px" alt="" />                                             </div>                                             <div class="banner_title white margintop50">                                                 <p class="fsize50 letterspacing2">Guide to                                                 </p>                                                 <p class="fsize90 letterspacing3 margint15">SharePoint 2013                                                 </p>                                                 <a href="#">                                                     <div class="button">                                                         <div class="icon">                                                             <i class="fa fa-shopping-cart fa-2x">                                                             </i>                                                         </div>                                                         <div class="button_text">Buy Now                                                         </div>                                                     </div>                                                 </a>                                             </div>                                         </div>                                     </li>                                 </ul>                             </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>                     <p><img src="images/HTML5.png" width="100%" style="max-width:550px" alt=""/></p>                                </div>     </div>     </div> <div class="fullwidth grey">   <div class="main_wrapper">             <div class="inner_wrapper">                         <div class="sharepoint_book_banner">                     <img src="images/banner.png" width="100%" alt=""/>                    </div>                </div>             </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">).

Figure 12-7: ContentPlaceHolderMain

ContentPlaceHolder is a .NET control that may be overwritten by the content in the page layout.

Part 1
Part 3
Part 4
Part 5

OneDrive for Business updates user experience

In March, at SharePoint Conference 2014, we announced a lot of goodness “coming soon” toOneDrive for Business in Office 365. Now, two months later, we’re beginning to roll out some of the user experience innovations and refinements, including Simple Controls, Site Folders, smarter Search, and more.

• Simple controls make the most common task easier, with new buttons for new, upload, sync, edit, manage, and share.

Read More!!

VELUX—Building global efficiencies and local service excellence with Office 365

Today’s post was written by Peter Bang, chief financial officer for the VELUX Group.

As CFO at the VELUX Group, I’m responsible for the financial health of the company. I’m motivated to ensure that we are running a cost-effective global operation so we can continue to design, build, and deliver the best skylights and roof windows, at the best prices. Right now, we are in the midst of a journey toward a more united and global company—One VELUX—with a goal to reduce costs by consolidating administrative business functions and uniting siloed teams in our company. We had local finance, HR, and IT departments in offices all over the world. While we want to preserve the local sales teams that ensure specialized customer service in the approximately 40 countries where we have a presence, we had to reduce the administrative inefficiencies that this decentralized structure entailed.

Read More!!

Heinz—Global food leader savors new ideas and cuts costs with Office 365

Today’s post was written by Leandro Balbinot, chief information officer at the H.J. Heinz Company.

When most people think about Heinz, they think about ketchup. And they should—the H.J. Heinz Company sells 650 million bottles of it every year. But that’s only the beginning of our global portfolio; we also develop baby food, frozen entrees, sauces, and other products sold in more than 200 countries. Creating so many products and taking them to market around the world requires a great deal of close cooperation among production, operations, sales, and other teams that make up our company.

Read More!!

SharePoint Branding Part 1

Y

ou have seen how SharePoint works in the online environment in the previous article. Now, let’s explore how you can brand SharePoint and create custom branded website for yoaur online public website.  To begin, you first need to design a site in the program of your choice, for example, Photoshop is popular program to design websites. You can also use Microsoft Expression Web to layout the site in HTML. Design the site and then convert it into HTML. SharePoint 2013 has made it easy to publish custom sites. An HTML site comprises of the html, css and javascript. SharePoint 2013 takes the HTML you create and automatically generates the master page. This is the most powerful tool introduced in SharePoint 2013. You can further customize the master page after it has been generated by SharePoint. SharePoint allows creating responsive designs and you can target multiple devices. SharePoint lets you target a different design for different devices. There is a new feature called Device Channels. You can design sites for multiple browsers. In this article, we will focus only on the desktop version of the site but targeting other platforms is easy. For this exercise, I have created an HTML site that you can download from the book’s website. Once you have downloaded the HTML site, you can start following the steps below to create a master page and a custom look and feel for your site.

1.      Login to your SharePoint Online site. Go to the public website and then go to Site Actions and select Site Settings. Click on Design Manager. Design Manager lets you change the look and feel of your site and your site does not look like a SharePoint site. Once you have created a custom design, you can use Design Manager to convert it into a master page. It is a new feature introduced in SharePoint 2013.  It makes it easier to create a fully customized, pixel perfect design. It is available in publishing sites because developing custom sites is something that is part of the publishing feature. It is available in both SharePoint Server 2013 and Office 365. It is the tools that you can use to manage all aspects of a custom design. The easiest way to upload and work on design files is to map a drive on your computer to the Master page Gallery of your site. This way you can work on the files directly on your local computer. 

2.      Before we start working on the design, first we have to map a local folder. Add your public website URL to trusted sites in your browser. Go to Tools > Internet Options > Security > Trusted Sites and then click Sites button. Copy URL to the text box and click Add. Click Close and then Ok.

3.      If you are logged into your site, log out and then login again and make sure you check Keep me signed in check box.

4.       Click on Design Manager in Site Settings. Click Upload Design Files.

Figure 12-1: Upload Design Files

Copy the link given on this screen. Make sure you highlight the URL by dragging the pointer over the link from start to end and then copy it, either by selecting Copy from the context menu or using Ctrl-C. Do not copy the shortcut from the context menu. You have to map your local folder to this online location. The steps below are for a Windows 7 machine. Steps for other operating systems may be slightly different. Open Computer by clicking the Start button and then clicking Computer. Click Map network drive.

Figure 12-2: Map network drive

5.      In the Drive list, click a drive letter. Choose any available letter.

6.      In the Folder box, paste the URL you copied above. You can also type the path manually.

7.      Select the Reconnect at logon check box. Also, check the Connect using different credentials.

8.      Click Finish. Enter your username (email) and password and check Remember my credentials check box and click Ok. This will create your mapped folder. If you get an error message, make sure you have copied the correct URL in the trusted sites in the browser. If everything seems ok but you are still denied access, then there is one option to overcome the hurdle but this is not recommended. In Internet Explorer, go to Tools > Internet Options > Security > Trusted Sites and then click Custom level… button at the bottom. At the bottom, in Reset custom settings, from the drop down, select Low and click OK. Click Ok again to close the options. Close all browser windows and open a new browser window and login to your public website and then repeat the mapping process described above and you should be able to map the folder this time.

9.      Now copy your HTML site folder to the mapped folder. Your HTML site should have following folder structure:

Figure 12-3: HTML site folder structure

For this exercise, you can download the HTML site from the download section of this book’s website. Unzip the folder to your local hard drive. It will have a site folder called Social. The folder structure of this site is shown in the above figure. Copy the whole folder (Social) to the mapped drive. You may have already noticed that the mapped network drive points to the master page gallery of your site. It has other out-of-the-box master pages also. Our new master page will reside in the Social folder on the server. We only need the index file to create the master page. Other pages will be created directly on the new site.

You need to be careful about one thing. The index page HTML should be XML compliant and should not have any missing tags or typos otherwise the conversion of HTML to master page may fail or you may get errors and warnings. In the Status column, you will see Warnings and Errors. Please note, even if apparently there is nothing wrong with the html file, you must validate it before trying to convert it. If you open it directly in the browser, it will work absolutely fine but Design Manager checks your page even for the tiniest of issues and reports errors if there are issues in the page, for example, if a starting or ending tag is missing, or a page directive is missing at the top, and so on. If you do get errors during conversion, click on Warnings and Errors link to view the issues. Fix the issues reported here and then try to convert the file again. Best way to fix all issues is to use an XML validator and then fix the issues before uploading the HTML file to the server. There are many free XML validators available online. Many sites let you check your pages free of cost online.

10.  Now that we have copied our HTML site to the master page gallery on the server, we are ready to convert the index file to the master page. Go to Site Actions > Site Settings. Click on Design Manager link. Click Edit Master Page link on the left.

11.  Click Convert an HTML file to a SharePoint master page link.

12.  Locate Social folder and click it. Select index file (index365.html) and click Insert button. Click Publish button when you are prompted. It won’t make any difference if you chose to not publish it yet. Within few seconds, the new html file will appear alongside other html files. A master page with the same name will also be created in the same folder. SharePoint modifies the HTML file and add various snippets. The ASP.NET master page contains all the required SharePoint controls. Design Manager is intelligent enough to ignore the ASP.NET code in the HTML page. Once the master page has been created, you should never edit it directly. If you need to make changes, make them in the HTML file. HTML file is linked to the master page. Any changes made in the HTML file automatically reflect in the master page. If you want to use the master page directly, first you have to disassociate the HTML file from the master page. To disassociate the HTML file, go to Site Actions > Site Settings and click Design Manager and then click Edit Master Pages. Click on ellipsis after the index365 file and again click ellipsis to open the menu and select Edit Properties.

Figure 12-4: Disassociate HTML file from Master page

Click Save button to save the changes.

Part 2
Part 3
Part 4
Part 5

Register now for May 27 user group session: No-code SharePoint solutions with Access 2013

Join us in Dublin on May 27 to learn how to build native SharePoint 2013 apps with Access 2013—no code skills required. With a rich UI and backed by SQL Server, the apps need little to no IT support. Microsoft Access team members Kevin Bell and Kevin Nickel will show you how end users can quickly build and customize native SharePoint applications with Access 2013 without writing any code.

Read More!!

SharePoint deployment: everything you need to know

To put things in perspective, let’s start with an everyday analogy to better understand the strengths and weaknesses of a SharePoint deployment. With the holidays coming up, a key question springs to mind: do I pack my expensive, specialist digital camera to capture those holiday moments? The one with the four interchangeable lenses, a user manual as thick as a telephone directory, a case, a charger, and more buttons to press than the Boeing Dreamliner? Or do I rely instead on the camera on my smartphone?

Read more>>