Chapter 3
Styling and Visuals
The intent of this chapter is to review each of the main areas within SharePoint that allow for customizing the look, feel, and operation of your sites. Many hours have been spent on finalizing colors and layouts on customer interfacing websites. Thankfully, much of the branding of your SharePoint Online sites can be done with ease. The ability to drop web parts and add functionality is quick and easy.
Know that there are limitations in what you can do with your styling in an Online environment. With a SharePoint on-premise implementation you have access to the underlying style sheets and code files, and (if you have lots of time for development) you can make extensive modifications to the layout and look of SharePoint. However, in the Online version, you don’t have access to these files and are thus limited in what you can do in your styling.
Basic Styling
We will dive into styling by reviewing how to apply a visual template to your site. There are several templates that you can apply that will change the overall color scheme of your site and the apps within it. You can access this by clicking the “What’s your style?” icon on the home page of your site or by clicking the Settings icon, then clicking the “Change the look” option (see Figure 3.1).
After selecting Change the look of your site, a long list of color schemes and layouts displays. Simply click the one that you want to use and you will be given an option to “Try it out.” Click the “Try it out” link and a preview window of your site with the new color scheme will appear. You can decide whether to keep it or try a different option. Several of these options are shown in Figure 3.2.
Note that changing the look on your main SharePoint site is slightly different from changing the look and color on a subsite. The steps to open the options for changing the look of your site or subsite are the same but the options are slightly different between the two.
Other actions that can be taken are renaming your site and adding a logo. You can modify the name and logo by clicking the Settings icon, selecting Site Settings, and selecting “Title, description, and logo.” This will open a screen where you can make the changes you would like, as shown in Figure 3.3. Your logo will appear in the upper left corner of the screen throughout your site.
Creating a Site Based on a Different Template
When you create your site, you have the option to base it on several templates. Let’s look at creating a site based on one of these templates, the Communication Site. Start by navigating to the top level of your SharePoint structure, which can be done by clicking on the SharePoint option at the top of any site page or by browsing to the base URL. Once there, click the Create site tab at the top of the screen and select Communication Site (see Figure 3.4). There are several layouts that can be chosen within this site template. The screen shown will give a static preview of what this looks like for standard and mobile devices.
Enter the Site name (which will automatically complete the Site address) and a brief Site description, then click Finish.
Clicking the Finish button will cause the new site to generate a display. The tiles that appear are actions that users can take to engage with this site. For example, in Figure 3.5 you can see what is called the “Hero web part,” which is a web part that consists of multiple functions and areas of configuration. Click the Edit tab for this page to move the various tiles around in this web part. Clicking Edit allows you to edit, add, or delete each functionality on this page.
When you edit one of the tiles (refer to Figure 3.6) within the Hero web part, you will be able to change the image and the link that the user will be redirected to when they click it. The idea here is that you would create a series of pages within your site collection, each being a landing page when one of these tiles is clicked. This communications landing page is essentially a dashboard that users would find themselves on when they log into the SharePoint site, allowing them to easily navigate around the system.
Navigation
The default navigation that SharePoint provides is acceptable for simple site structures, but if you have a complex site with many components, you will likely want to revise what links are available to click through the site. There are two navigation sections. The upper set of links is called the Top Link Bar, while the left-hand column is called the Quick Launch.
On a main site page, you have two options to alter the links that are on the Top Link Bar. You can click the Top Link Bar option in Site Settings or you can click the Edit Links button at the top of the screen. Figure 3.7 shows a link being dropped in the “Drag and drop link here” option. You can also click the “+ link” option to give a name and add a URL.
The Quick Launch bar can be edited as well by clicking the Quick Launch link in Site Settings. This will open the screen shown in Figure 3.8. Here you can add as many links and headings as you want. As you add, remove, and reorder items on this screen, it will update the actual navigation bar on the left in real time. The links that you add can be links to internal SharePoint URLs within your site or they can be external links to other websites.
For sites that have many nested components, such as subsites or document libraries, you may want to enable a dynamic tree view option so that users can quickly get at the information they need. From the Site Settings page, click Navigation Elements. By clicking the Enable Tree View option on this screen, a classic “Windows Explorer” component will be added to the quick launch navigation bar. Figure 3.9 shows what this looks like in action.
Modifying Pages
Throughout SharePoint, you will notice an “Edit” tab on virtually every page and component. The ability to customize SharePoint is built into the functionality. Some of these controls offer basic ways to modify functionality and look, as previously outlined in this the chapter. Other areas allow for extensive customization. Altering a page within your site is an example of a component that has extensive built-in options for layout changes. To demonstrate this, click the Edit button in the upper right-hand corner of your site’s home page (see Figure 3.10).
Clicking the Edit link will open the page in edit mode and provide several options, including the following:
1.Check Out the page for editing. Just like a document, you can collaborate on a page. Check Out the page to ensure it is locked while you are working on it.
2.Add text and style it with standard word processing options (color, size, highlights, etc.).
3.Alter the layout of the page. You can divide your page into a single column, multiple columns, and several other layouts, as shown in Figure 3.11.
4.Alter the HTML of individual controls (click the Edit Source tab to do this). You can click a control within the page layout and customize the HTML as you need. In Figure 3.12, the top HTML is the default provided by SharePoint. The lower section provides a simple modification. The result of the modification is shown in the published page below the code. Altering the HTML gives you some additional control over the look of your site page.
5.Add images, videos, links, and files by clicking on the respective option on the Insert tab.
6.Add a web part to your screen by clicking on the Web Part icon on the Insert tab. This will let you browse through your site to add a web part. Chapter 4 will show you how to add a custom web part to your page.
7.In addition to all the functionality available in the editing toolbars, you can also drag and drop the controls in the page to alter the layout.
Embedding a Document in a Page
You can embed a document within a page using the Embed code functionality of SharePoint. Embedding a document lets users view the document directly in the page without having to open it in an external page or application. To see an example of this, start by opening a Word document in Word Online. Click the File option on the toolbar and click Share. Select the Embed tab as shown in Figure 3.13.
In the window that opens, you will see a preview of your document as well as an embedded code segment (see Figure 3.14). You can adjust the height and the width of the embedded document as well as determining what page the document will start on and whether it can be printed. Copy the code from the Embed Code field and return to SharePoint.
Back in SharePoint, we will embed this document directly on the home page by clicking the Edit button in the upper right corner of the site. On the Insert tab, click the Embed Code button and paste the code you copied earlier into this box. Once done, click the Insert button. Figure 3.15 shows this in action.
When the home page being edited is saved, the change will be published and the document will be part of the functionality available to users. Figure 3.16 is a screenshot of what the embedded document looks like in the fully published page. Note that there are some options associated with the document, including the ability to zoom in/out, read in full screen mode, and download or print a copy.
Adding a Chart
The chart control that is available allows you to create a simple bar or pie chart of static information. While of limited value because it cannot be made dynamic, it is quick to use and could be manually updated to display changes over time. To work with this control, edit a page within your site. Click the “+” icon anywhere on the page being edited to display the list of available controls. Click the Quick chart option shown in Figure 3.17.
After clicking the web part icon, you will have several items to configure. Start by naming the chart and then enter the labels and values for the data you want to display. Figure 3.18 provides an example.
If you want to display dynamic chart or report content, you have several options.
- You can use the Power BI control to link to an active report that you have created. You will have to create this report using Power BI (outside of Share-Point). You then take the link to that report and paste it into the Power BI control in SharePoint.
- Use the Excel Web Access web part. This requires that you create your report in Excel. When you have an Excel report to link to, you can add the Excel Web Access web part to your page. This is available with enterprise licensing only.
- You can write custom code. There are patterns and examples online for JavaScript-based charts that pull their dynamic data from existing SharePoint lists. You can also custom code your own web part to display information.
- There are several third-party controls that can be purchased and added into your SharePoint solution.
Using Microsoft Forms for Surveys
The Microsoft Forms component is the final web part that we will look at. This web part allows you to create interactive functionality for your users in the form of surveys, quizzes, and polls. To work with Microsoft Forms, click the “+” icon anywhere on a page that is being edited and select the Microsoft Forms icon. The web part will appear on your screen as shown in Figure 3.19.
Click the New form tab. A window will open and prompt you to name your survey. Once done, you will click the Create button. A new frame will open where you can create questions and answers. Start by adding a new question. The types of question options are shown in Figure 3.20.
Choice, Text, Rating, Date, and Ranking are obvious, but Likert and New Promoter Score will be new to you. Likert lets you identify a question and then allow for an indicator of how much something is liked, as shown in Figure 3.21.
The ability to style your surveys is also available—just click the Theme tab in the upper right-hand corner and choose from one of the options. Figure 3.22 shows what is available by default, but you also can customize themes and create your own.
For surveys that have nested logic, you can create branching logic by clicking the ellipses in the upper right corner and selecting Branching. The logic here is basic, but it will allow you to skip questions or go to the end of a form, depending on responses.
When the survey development is complete, you can preview it (in computer or mobile views) and then publish it. Publish it by clicking on the Share tab. In this example, we will click the email option and send a link to the survey (see Figure 3.23). The recipient will get the email and be able to click the link.
When the survey has been completed, you will be able to review the responses— but you will need to log into Microsoft Forms to do so. Go to forms.office.com and look at your survey (as shown in Figure 3.24). You will be able to track the results and export to Excel. Microsoft Forms is a cool little tool, and you don’t have to use it within SharePoint, as it is its own separate application. But the integration within SharePoint is nice and helps to add interactive visuals to your sites.
Summary
You are now familiar with several options to style your SharePoint Online environment. Unlike on-premise editions, there are limitations on what you can do with altering the look and feel of your sites, but the ease with which you can change themes, colors, and layouts makes up for any perceived shortcomings. You can also add several standard web parts and controls to your site. You can bring basic charting and survey functionality into your solution as well. Depending on your licensing with O365, you will have access to different controls but you will come to realize that they are simplified. You will most likely want to build your own web parts, which we will look at in some detail in the next chapter.