Creating and managing sites using SharePoint Designer 2013
MICROSOFT SharePoint 2013 is not just another web development platform that IT uses to develop applications that are then handed over to the users. SharePoint changes the game. SharePoint empowers users to do whatever they need to do—for themselves. Users no longer have to send content in an email to someone else for them to add it to a website. When solutions are built on top of SharePoint, the aim is to remove IT staff from the day-to-day tasks, make users self-sufficient, and even to let users build solutions for themselves.
The data and components that are needed for such solutions may not be stored in or be part of SharePoint or Microsoft Office; however, SharePoint enables you to create solutions rapidly by assembling, connecting, and configuring the components. Such solutions are known as composite solutions or mashups.
Most composites require the generation of a number of pages, sometimes called forms or dashboards that aggregate the information and are designed to allow the user to dynamically interact with the data. Using the browser and other what-you-see-is-what-you-get (WYSIWYG) tools, such as Microsoft SharePoint Designer 2013, Microsoft Access 2013, Microsoft InfoPath 2013, and Microsoft Visio 2013, the creator of these pages can amend the content visually without learning the different declarative or coding languages. These users can create successful SharePoint noncode solutions because they know what they want to achieve, they understand the business needs, and with a bit of SharePoint knowledge, they can wire together the business processes or sets of tasks. Such users have been termed by technology research firm, Gartner, Inc., as citizen developers, also known as the consumer developer.
Note
Gartner, Inc. reports that citizen developers will build at least 25 percent of new business applications by 2014 (see www.gartner.com/it/page.jsp?id=1744514) and warns that IT departments that fail to capitalize on the opportunities that citizen development presents will find themselves unable to respond to rapidly changing market forces and customer preferences.
SharePoint Designer was once the tool for the citizen developer. With the removal of Design view, SharePoint Designer 2013 is de-emphasized as a no-code forms tool, and business users may decide to use Access web apps and Visio diagrams to fill this gap.
Note
See Chapter 17 and Chapter 21 for more information about using Access web apps and Visio diagrams in SharePoint.
However, you can still build solutions with SharePoint Designer as the Code view remains. This means to achieve many of the same results with SharePoint Designer 2013, that were created using SharePoint Designer 2010, you will need to learn code. For the typical business user, this is not an option. Therefore, for those users, the focus of SharePoint Designer is now on workflows and creating external content types (ECTs), as well as an alternative tool for site collection and site owners to administer and manage sites, thereby allowing them to go beyond what the browser provides.
Note
More information on workflows can be found in Chapter 7 and information on ECTs can be found in Chapter 22.
SharePoint 2013 solutions should be more than a collection of lists, libraries, pages, and workflows. Each of these components should be combined to provide users with a holistic solution, where the components work together and not as discrete entities. Using web part connections and adding commands to the ribbon, are examples of how you can improve the user experience (UX). This chapter details a number of techniques that are useful when working with SharePoint Designer 2013 and other design tools to help you create composites.
You can use SharePoint Designer to edit and build solutions with SharePoint Foundation and SharePoint Server sites. Once connected to a SharePoint site, you can use SharePoint Designer to administer, create workflows, and customize pages. As with the previous release, SharePoint Designer 2013 is free and available from Microsoft’s download site, www.microsoft.com/download/details.aspx?id=35491.
You can open a site in SharePoint Designer from the browser or by opening SharePoint Designer first and then opening a site from within SharePoint Designer. You can open a file in SharePoint Designer, such as an .html file, that does not live in a SharePoint site; however, to do so, a SharePoint site must already be open in SharePoint Designer.
Note
If you are using a different authentication authority for your SharePoint sites than the one used when you sign on to your computer (for example, when your SharePoint site is hosted by a third party), then it is easier to open the SharePoint site in the browser and then open SharePoint Designer from the browser.
To open a site within SharePoint Designer, you must first open SharePoint Designer. In Windows 7, click Start | All Programs | SharePoint, and then click SharePoint Designer 2013. In Windows 8, you can find it on the Start screen, as shown in Figure 20-1.
To open a site from within SharePoint Designer, use the following steps:
Open SharePoint Designer to display the Backstage view with the Sites tab highlighted.
If you previously opened a SharePoint site, these will be listed below Recent Sites, as shown in the following graphic.
To open a site not listed under Recent Sites, under Open SharePoint Site, click Open Site to display the Open Site dialog box.
In the Site Name text box, type the URL of your SharePoint site, and then click Open. You may be prompted for your user name and password.
When you have a site already open in SharePoint Designer, you can open subsequent sites by clicking the File tab to display the Backstage view, and then by clicking Sites in the left pane. Then, under Open SharePoint Site, click Open Site. Alternatively, on the Subsites tab, which can be displayed by clicking Subsite in the Navigation pane, you can use the Open Site command in the Edit group. If you have a SharePoint site already open in SharePoint Designer, when you open additional sites, a new SharePoint Designer window opens.
Note
The focus of SharePoint Designer is still on an individual site in a site collection; that is, when you customize a site, your customizations are applied to the site that you have open. Therefore, if you wish to customize more than one site, SharePoint Designer opens a separate window for each site. As you browse through sites in a site collection, you can open a massive number of instances of SharePoint Designer. As sites can look very similar in SharePoint Designer, to ensure that you do not customize the wrong site, open only one site at a time.
Unlike in SharePoint 2010, in SharePoint 2013, there is no link to open SharePoint Designer from the Settings menu. You can still open a site in SharePoint Designer from the browser, however, by using one of the following methods:
On a wiki or publishing page on the Page tab, click the Edit command down arrow, and then click Edit in SharePoint Designer, as shown in Figure 20-2.
When viewing a list or a library, click either the List or Library tab, and then click Edit List or Edit Library in the Customize List or Customize Library group, as shown in Figure 20-3.
Don’t be put off by its name; SharePoint Designer is not aimed at just web designers—with SharePoint Designer, you can carry out similar tasks to the browser; however, you may need to jump back to the browser to complete some tasks.
When you first open a site with SharePoint Designer, you are presented within the SharePoint Designer workspace with a site’s summary page, as shown in Figure 20-4. This page provides you with key site information organized in to five areas: Site Information, Customization, Settings, Permissions, and Subsites. You can use this page to change many site settings, manage permissions, and create new subsites. You will see settings pages for other site artifacts, such as for a list, library, master page, and workflow.
Similar to other Microsoft applications, SharePoint Designer has a Quick Access Toolbar that contains a set of commands that are independent of the currently active Ribbon tab. You can add SharePoint Designer commands that you frequently use to the toolbar, such as creating a Web Part page or creating a list or library. To add commands to the Quick Access Toolbar, use one of the following methods:
On the ribbon, click the appropriate tab to display the command that you wish to add to the Quick Access Toolbar. Right-click the command, and then click Add To Quick Access Toolbar, as shown in Figure 20-5.
On the Quick Access Toolbar, click the last icon on the Quick Access Toolbar and then click More Commands, as shown in Figure 20-6.
Click the File tab to display the commands in Backstage view. Click Options to display the SharePoint Designer Options dialog box, and then click Quick Access Toolbar.
In the Navigation pane shown in Figure 20-4, selecting the first site object provides a summary of the SharePoint site, and the Site tab on the ribbon is available. When you click the icon to the left of a subsite in the Subsites area, the tab set, Site, appears that contains one tab: Subsites. If you then select the List and Libraries site object in the Navigation pane, a gallery page displays a list of artifacts, which in this case are lists and libraries. On the ribbon, the previous tab dynamically disappears and is replaced with the List and Libraries tab, as shown in Figure 20-7.
Figure 20-7. The gallery page displays the lists and libraries site objects, and the ribbon displays the List And Libraries tab.
The workspace breadcrumb can be compared to Windows Explorer and allows you to drill down and step upward, as shown in Figure 20-8. Use the back and forward arrow in the breadcrumb as you would use it in the browser to display previous contents.
Note
Although you can upload files into libraries using SharePoint Designer, you cannot associate metadata with those files or create, modify, or delete list items with SharePoint Designer—you must use the browser to complete those tasks.
The status bar is context-sensitive and will provide you with additional tools and information depending on what is displayed in the workspace. In SharePoint 2010, the status bar also contains a Log In command that allows you to log on as a different user. Just as the Sign In As Different User command in the browser was removed from the Settings menu, so the Log In command has been removed from SharePoint Designer 2013.
When you open a site in SharePoint Designer 2010, you are not presented with the file and folder structure of the site, as with other web editing tools. The URL structure in a SharePoint site does not exist, as it is created from a combination of files from the SharePoint server and content in the SQL content database; however, it is what web developers expect to see in a web editing tool for non-SharePoint sites. The URL structure of a site is still available by clicking All Files in the Navigation pane, as shown in Figure 20-9.
SharePoint Designer has historically been a very powerful and useful tool for customizing SharePoint sites and creating solutions. However, the long-lasting implications of using SharePoint Designer 2007, and its predecessor Microsoft FrontPage 2003 on SharePoint sites, caused organizations to prohibit the installation of SharePoint Designer or to limit its use to all but a few trained users.
When the save command was clicked in SharePoint Designer 2007 or FrontPage 2003, SharePoint would unnecessarily break the link between a page and its site definition file stored on the SharePoint server, resulting in what is known as a customized or unghosted page. A copy of the page from the SharePoint server would be stored in the SQL Server content database. The customizing or unghosting of a page was not always made obvious to the untrained user. SharePoint Designer 2007 or FrontPage 2003 also did not provide an easy method of controlling the level of modifications users had with SharePoint Designer.
Customizing pages using SharePoint Designer 2013, as in SharePoint Designer 2010 and SharePoint Designer 2007, does not adversely affect the performance of a page in most cases—it is more of a maintenance issue, which is most often experienced when upgrading from one version of SharePoint to another, or when an organization implements a major change to the look and feel of their installation.
Note
More information on customized and unghosted pages can be found in the sidebar, “Site template pages,” in Chapter 9.
SharePoint Designer 2013 implements a “safe by default” approach that places reasonable limits around its usage so that citizen developers do not accidentally create solutions that have a negative effect. You can still customize a page in SharePoint Designer; however, first you need to be allowed to customize a page, and second, you have to specifically change your edit mode to advanced mode before you can customize a page.
There are SharePoint Designer usage settings at the web application and site-collection levels that can be used to prevent or restrict the usage of SharePoint Designer. These are not security settings. When configured at the web application level, these settings affect all users, including site collection administrators for all site collections and sites within the web application. When they are configured at the site-collection level, they apply only to site owners and designers for sites within that site collection.
At both web application and site-collection levels, four settings allow or disallow the following SharePoint Designer uses:
Enable SharePoint Designer. If a user has SharePoint Designer open and you clear this check box, it will not close SharePoint Designer for that user; however, the next time the user tries to open the site in SharePoint Designer, the Web Site Editing Is Disabled dialog box opens, stating that the website has been configured to disallow editing with SharePoint Designer, as shown in Figure 20-10.
Detach pages from site definitions. Use this option to disallow any pages associated with a site definition file from being customized (unghosted), including master pages and publishing page layouts. Content within web parts or within the EmbeddedFormField can still be modified. This option does not affect pages that are created in the content database and have never been associated with site definition files.
Customize master pages and page layouts. This is similar to the previous option; however, by selecting this option, you will only disallow the customization of master pages and publishing page layouts that are associated with site definition files. These are often the types of pages that cause organizations major maintenance problems if they are customized, as it often is with these page types that organizations wish to apply global changes across all sites. If this option is not selected, then the Master Page object will not be available on the Navigation pane in SharePoint Designer. If you are using SharePoint Server and displaying a publishing site in SharePoint Designer, then the Page Layout option will also not be available in the Navigation pane.
See the URL structure of the website. Within SharePoint Designer, users will not see the All Files option on the Navigation pane, the All Files gallery page in the workspace, or All Files in the mini-gallery. If this option is enabled but the Customize Master Pages and Page Layouts option is not allowed, then site owners and designers can see the master pages and page layouts, but they are not allowed to amend them.
You cannot use these options to control the usage of SharePoint Designer for different groups of people or to apply different usage rules on a per-site basis within the same site collection.
When any of the out-of-the-box site templates are used to create the root site of a site collection, site owners and designers can use SharePoint Designer; however, they cannot detach pages from the site definition, customize master pages or page layouts, or see the URL structure of their websites. Site collection owners are only restricted by the settings at the web-application level and are not affected by the selection of check boxes on the SharePoint Designer Settings page at the site-collection level.
If you are using SharePoint Server and the root site of a site collection was created using a publishing site, all four check boxes on the SharePoint Designer settings page at the site-collection level are selected.
To apply restrictions at the web-application level, complete the following steps. (You will need to be a SharePoint server administrator.)
Open the SharePoint Central Administration in the browser and then, in the Application Management section, click Manage Web Applications to display the Web Applications page.
Click the web application for which you want to restrict the use of SharePoint Designer. On the Web Applications tab, click General Settings in the Manage group, and then click SharePoint Designer, as shown in the following graphic.
The SharePoint Designer Settings dialog box is displayed, as shown next.
Clear or select the check boxes as needed, and then click OK.
Alternatively, in the SharePoint Central Administration website, you can configure SharePoint Designer usage settings at the web-application level by going to the General Application Settings page. Click Configure SharePoint Designer Settings to display the SharePoint Designer Settings page, and then select the appropriate web application in the Web Application section.
To configure SharePoint Designer settings at the site-collection level, complete the following steps. (You will need to be a site collection administrator.)
Open the root site of your site collection in the browser. Click the Settings icon, and then click Site Settings to display the site settings page.
Under Site Collection Administration, if you see only Go To The Top Level Site Settings, you have opened a subsite in the browser. Click the link to go to the root site’s Site Settings page. If you do not see the Site Collection Administration section on the Site Settings page, you are not a site collection owner and cannot complete the rest of the steps.
Under Site Collection Administration, click SharePoint Designer Settings, as shown next.
The SharePoint Designer Settings page is displayed. When one of the four check boxes are not selected at the web-application level, then the matching check boxes at the site-collection level are unavailable and a red text message that each option was disabled by your server administrator is displayed, as shown next.
On the SharePoint Designer Settings page, select the check boxes as needed, and then click OK.
In Chapter 2 you learned about web applications and that a web application can consist of one or more site collections; each site collection always has one top-level site and, optionally, one or more subsites, which are also called child sites. If you are a SharePoint server administrator, using the browser and the SharePoint Central Administration website, you can create web applications and site collections. Users with the Create Sites permissions right can use the browser to create subsites from the Settings menu. Such users can also use SharePoint Designer to create subsites. You cannot create web applications or site collections using SharePoint Designer.
There are many options to create a subsite using SharePoint Designer:
From the Backstage view, on the Sites tab, under New SharePoint Site, click New Blank Web Site; or under Site Templates, click Blank Site, Blog, or Team Site. This will create subsites beneath the current site. The Add Subsite To My Site option is applicable only if you are using SharePoint Server.
From the Backstage view on the Sites tab, under Site Templates, click More Templates to open the Site To Load Templates From dialog box, which allows you to specify a different site than the one currently open. The site templates from that site are then retrieved and displayed in the Backstage view, as shown in Figure 20-11.
Display the Site Settings page in the workspace, and then click New in the Subsites area title bar.
In the Navigation pane, click Subsites to display the Subsites gallery in the workspace and then, on the Subsites tab, click Subsite in the New group.
When using the last two options, the New dialog box opens and displays the site templates in the middle pane, as shown in Figure 20-12. The right pane displays a description of the site template selected from the middle pane. If the middle pane does not include any site templates, then, in the Specify The Location Of The New Web Site text box, type the URL of the subsite and then click in the middle pane. SharePoint Designer will communicate with the SharePoint Server hosting your SharePoint site and then populate the middle pane from the information retrieved from the SharePoint server.
When you have a site open already in SharePoint Designer, the new site will open in a new SharePoint Designer window.
Note
Whenever you create a site in SharePoint Designer, it asks you only for the URL of the site and the site template to use. It does not prompt you for any other site properties, such as the title of the site or the permissions to use. The title of the site will be the name of the site template used to create the site, the site will inherit its permissions from its parent site, and the site will not appear as a link in the top navigation bar. Therefore, the first task you should complete once you create a site is to use the Site Settings page in SharePoint Designer to modify the title of the site and, if appropriate, its permissions. If you do not change the title immediately, then you could have many sites with the same name. This can be very confusing for users, as it is the title of the site that is displayed in the browser’s user interface. Also, if you plan to use the new site as a basis for creating a solution or customization, which you will then use as a template for new or existing sites, then it is best practice to amend the permissions of the site so that only you and other users who are helping develop the solution have access to the site.
SharePoint Designer is not a tool for general use by all those who visit or have access to a SharePoint site. Rather, it is a tool targeted to site owners, business analysts, project managers, developers, and IT professionals.
There are a few tasks that still cannot be completed within SharePoint Designer. For those tasks, click the site object in the Navigation pane to display the Site Settings page, and then, on the Site tab, click Administration Web Page in the Manage group. A browser window opens and displays the Site Settings page.
When you first open a site in SharePoint Designer, the Site Settings page is displayed in the workspace, as shown earlier in Figure 20-4. The page is divided into five sections:
Site information. Use this section to change the site’s title and description, which are important properties of a site, as they appear on each page within a site and communicate to users the purpose and function of the site. They are also important as the words in the title and description fields are used to rank content items that are returned in a search result set.
Customization. Use this section to open a new workspace tab, when the Home page is displayed in edit mode. In SharePoint Designer 2010, this section also contains a link to display the Site Theme page. This link no longer exists in SharePoint Designer 2013.
Settings. Use this section to select the options to display the Quick Launch, enable tree view, and enable site RSS feeds. The Quick Launch and tree view options are the same as you would find in the browser on the Site Settings page, under Look And Feel | Tree View. You can select the RSS feeds option in the browser when on the Site Settings page, under Site Administration | RSS.
Permissions. Use this section to assign users and groups permissions to this site. When you click the icon to the left of a user or group, the Site tab set becomes active and displays the Permissions tab, as shown in Figure 20-13, which you can use to add new users and groups, edit permissions, inherit permissions from the site’s parent site if the site is using unique permissions, and manage anonymous access, permission levels, access requests, and site collection administrators.
Subsites. Use this section to list all the subsites created below the site. When you click in the area below Site Name, the Site tab set becomes active and displays the Subsites tab, as shown in Figure 20-14, which you can use to create a new subsite, open, delete, or rename a site, view the subsite in the browser, view the Site Settings page in the browser for the subsite, or save the subsite as a template.
You can use the SharePoint artifacts listed in the Navigation pane to manage other components of the SharePoint site, such as the following:
Lists And Libraries. The List and Libraries gallery, as shown earlier in Figure 20-7, allows you to create new lists and libraries, manage list settings, edit columns, delete or rename a list or library, preview the list or library in the browser, open a browser window and display the List Settings page, and save the list as a template. If you click a list in the workspace, the List Settings page is displayed in the workspace, as shown in Figure 20-15. An alternative method of navigating to this page is to click the icon to the left of the list in the List and Library gallery, and then, on the Lists And Libraries tab, click List Settings in the Edit group.
The List Settings page contains eight sections that allow you to view list information, edit list columns and the permissions for the list, manage general settings for the list, such as hiding the list from the browser so that is does not display on the view all sites content page, manage the content types and workflows associated with the list, create and manage list views and forms, as well as create custom actions.
Site Groups. When you click this option in the Navigation pane, the Site Groups gallery opens in the workspace and the Site Groups tab is displayed on the ribbon, which allows you to add users to an existing group, create new groups, edit and delete a group, make a group the Default Members group, or view the group permissions. When you click one of the groups, the Settings page for that group is displayed in the workspace, as shown in Figure 20-16.
The first step in designing your site is to understand your content. Too often, people start designing their sites by creating wireframes without understanding the content. Content is king. You should try and find the answers to the following questions:
How often is it going to be updated?
Who is going to update it?
How often are they going to update it?
What is the main message of the site, of the page or parts of the page? When you design a page, if users to your site could walk away with just one thing from your site, what would it be? What is going to make users come back to your site?
These questions will help you decide which site template to use, the content types, site columns, workflows, lists, libraries, and types of pages to create, as well as which web parts to place on those pages. For example:
When users have a great deal of static content and images to add to a page, if you design your site so that this content is stored, say, in a Content Editor Web Part (CEWP), then not only will you have to train users on how to use that web part, but users may find this too hard and time consuming to update at the frequency they require. Therefore, the information on the page will become dated and other employees will not visit the site, as it is not a representation of the current business process. Perhaps you should have used a wiki page.
When content is not going to change frequently, such as company policies, information on company policies must be readily available to all employees. There may also be associated information that you want to be displayed on the page, such as when the policy is to be reviewed; plus, your company’s human resources department may own the production of the policy pages and it may also require that part of the page is used to tell visitors of the HR department’s plans and an RSS feed of the directors’ blog sites, as well as what they are tweeting about. So the page that you design needs to contain both static content that needs to go through an approval process and dynamic content. This affects the page layout and how you lay out the content onto your pages. Is there any special branding consideration that the HR department requires for its site? Is it using any custom web parts that do not follow the same cascading style sheet style as the other web parts?
You need to understand the navigation requirements. You do not want to use a different navigation standard that is used elsewhere on your site. This will confuse visitors to your site. The larger the organization, the more complex the navigation is. If the navigation does not follow a consistent pattern, the users will not know what they are doing or how to get back to where they were originally, or how to get back to a specific step in a business process.
You must also consider the user experience (UX). Although computers have been around for over half a century, there are still many users in organizations who have an aversion to computers, and therefore it is important to gather requirements and understand the skill level of the users who will make use of your solution. Most users of SharePoint are not developers, nor are they administrators—they do not understand the technology behind the pages, lists, and libraries that they need to use and maintain. Many users have experienced many system changes, and to many, your solution is just one more in a very long line of systems they are going to use. They don’t have the time to sit down and learn your new system—they’ve got their day job to be getting on with!
So when you design your site, you have many aspects to consider, and this not only affects the page layout, content types, site columns, lists, and libraries you should use, but it also affects how you want your sites to look. Do you want to move some of the UI objects and want your sites to represent your company’s branding? Do you want to brand all sites—sites based on team sites, group work sites, document workspaces, meeting workspaces—or only some of them? Do you want site owners to be able to choose and apply their own branding? This will also help you identify if you need any custom development or whether you can meet your design requirements using the browser and SharePoint Designer or another tool.
Note
If you wish to design or brand Internet-facing websites, where the publishing feature is activated, then you can use any professional HTML editor, such as Microsoft Expression Web or Adobe Dreamweaver—that is, now, a professional web developer, can connect their tool of choice to SharePoint 2013. Then, they can import their HTML files into the publishing site by using the new Design Manager.
In SharePoint 2010, themes reused the theme definition and format defined in the Office Open XML standard that was introduced with Microsoft PowerPoint 2007 to create new themes for slide decks. Using the browser on a SharePoint Server 2010 publishing site, or on a site when the Publishing feature was enabled, you could create your own new themes or you could create a new .thmx file by using Microsoft Word 2010, PowerPoint 2010, or Theme Builder. The .thmx file could then be uploaded into the Theme gallery.
In SharePoint 2013, the theme engine has changed—it is faster and no longer consists of just colors, but also includes fonts and optional background images. It is also based on HTML5; therefore, you are not able to use Office applications to create new themes. It is now easier to change the look of a site or create a new look in the browser by clicking the What’s Your Style? tile in Getting Started With Your Site or clicking the Settings icon and then clicking Change The Look. You can also navigate to the Change The Look page, as shown in Figure 20-17, by clicking Change The Look, under Look And Feel on the Site Settings page.
A total of 18 different looks are available. You can use any of these as a basis for a new look by clicking the preview image to display the second Change The Look page, as shown in Figure 20-18.
Figure 20-18. Once you have chosen a look, you can change the color scheme, background image, and font.
Most of the Change The Look page is used to display a preview of the look that you have chosen. In the left column, you can modify:
The background image. This is displayed in the upper-left corner, and you can use the Change and Remove commands to use your own image as the background or to remove the background image. If you do not like the background image, you can open Windows Explorer and drag a new image over the background image. The file will be uploaded automatically to the Site Assets library of the site. When selecting a background image, you should keep in mind that the content, such as static text, images, tables, and web parts, will be placed over the image, so you should try to select an image that won’t make the content difficult to read.
The supported file types for the background image are .jpg, .bmp, .png, and .gif. You do not have to worry about the size of the image file, particularly of .jpg and .bmp files; for example, the image could be taken with your mobile phone and may be many megabytes or even gigabytes in size. The upload process will compress and scale the image to reduce its size, so that it won’t affect the performance of page loads.
Colors. When you pause over the colors in the drop-down list, the preview temporarily changes to show the effect that the color palette would look like on your site. Only three colors from the color palette are shown.
Site layout. This is the master page. By default, there are two master pages to choose from: Seattle and Oslo; and again, when you pause on it, the preview changes to show the difference between the master pages. The master pages shown are retrieved from the Master Page gallery for the site and only those that have an accompanying preview file.
Fonts. The list of fonts can be web fonts, as well as web-safe fonts. Web-safe fonts are those fonts that are guaranteed to be on every computer.
To apply the look to your site, click Try It Out. It is at this point that the theming engine creates new files that contain the CSS and images that match the new look. Your site’s Home page is then displayed using the new theme, as shown in Figure 20-19. You then have the options No, Not Quite There to return to the previous page or Yes, Keep It to apply the theme. If you choose Yes, Keep It, the files previously created by the theming engine are used by your site.
The different looks displayed on the Change The Look page are a combination of four components: a master page, color palette, font scheme, and background image, which is why the looks are known as Composed Looks. Users can choose any combination of the components. The components are linked together either by using the Composed Looks page or by using Design Manager.
New master pages, color palettes, and font schemes will probably be created by the IT department; however, users can upload new background images that they want for their site.
In SharePoint 2013, SharePoint Designer is no longer needed to build master pages and page layouts for publishing pages. Microsoft has created a new tool available on every publishing site: the Design Manager, which was discussed in Chapter 12. For collaboration sites, if you do not want to activate the publishing feature, you can use SharePoint Designer to create master pages and the other components and then use the Composed Looks page and Theme Gallery pages, which you can navigate to by using links under Web Designer Galleries on the Site Settings page.
The color palette and font schemes are XML files that are stored at the top-level site of a site collection in the “15” folder in a document library, as shown in Figure 20-20. They are located in the Theme Gallery and have a URL of _catalogs/theme. The two file types have the following extensions:
.spcolor for color palettes files
.spfont for font scheme files
This library is not configured to use versioning, nor is it configured to require checkout; however, if you do check out any of .spcolor or .spfont files as you modify them, forget to check them back in, and apply a Composed Look to your site that uses them, then the SPTheme logic will not load them properly.
The four components are associated together to make a Composed Look. The information where to find the four components for each Composed Look is saved at the site level in a list named Composed Look that has a URL of _catalogs/design. Each Composed Look comprises a name, master page (.master), theme URL (which points to an .spcolor file), image URL, font scheme URL (which points to an .spfont file), and display order, as shown in Figure 20-21. The font scheme and background image are optional. The two elements that are always required are the color palette and the master page. Although only the master page URL is specified, in the master page gallery where the master page is stored, there must be the associated preview file (.preview).
When a site is first created, the default Composed Look that is applied is Office, which uses the Seattle master page and the palette001 theme, with no font or background image.
When a Composed Look is applied to a site, several images and CSS style sheets based on the .spcolor file are created. Then a new folder is created in the Themed folder in the Themes Gallery and the images and CSS style sheets are put inside it, which is similar to how a theme is applied in SharePoint 2010. Therefore, just as in SharePoint 2010, if you update any of the theme files, you will need to remove the theme and reapply it to a site to see the modifications.
You can view the files created by navigating to the folder using the All Files option in SharePoint Designer, as shown in Figure 20-22.
When a theme is applied to a site, then the ThemedCssFolderUrl property of the site is set to the new folder in the Themed folder, which can be displayed using the following Windows PowerShell commands:
(Get-SPWeb http://intranet.adventure-works/sites/IT/Workflow).ThemedCssFolderUrl/sites/it/_catalog/theme/Themed/D0B0820C
You can programmatically apply a Composed Look by using the ApplyTheme method, which now has four parameters:
[ClientCallableMethodAttribute]
public void ApplyTheme(
string colorPaletteUrl,
string fontSchemeUrl,
string backgroundImageUrl,
bool shareGenerated
)
Figure 20-22. To display the files generated by an applied theme, use SharePoint Designer to navigate to the catalog/theme/Themed gallery and click the folder created.
The shareGenerated parameter is used to decide where to store the themed CSS output files. Setting this parameter to:
True means that the files are stored in the Themed subfolder of the Theme Gallery of the top-level site of the site collection;
False means that the files will be stored in the _themes folder within the site being themed.
The guidance for this property is the same as it was in SharePoint 2010; that is, use true for SharePoint Server and false in SharePoint Foundation.
However, it is unlikely that you will use the ApplyTheme method in your code since it is more likely that you will only specify the color palette and font using something similar to the following code, where the variable spWeb contains the site where the palette is to be applied:
SPFile spColorFile = spWeb.GetFile(spWeb.ServerRelativeUrl +
"/_catalogs/theme/15/palette001.spcolor");
SPFile spFontSchemeFile = Web.GetFile(spWeb.ServerRelativeUrl +
"/_catalogs/theme/15/fontscheme001.spfont");
SPTheme spTheme = SPTheme.Open("SPIOTheme", spColorFile, spFontSchemeFile);
spTheme.ApplyTo(spWeb, true);As a Composed Look is a value in the Name column of the Composed Look list, and the components that are associated with that Composed Look are values in the other columns in the list, it is easy to create or modify new Composed Looks by using the New Item or Edit Item command on the Items tab. Any items that are listed in the Composed Look list are automatically available when you navigate to the Change The Look page.
Both the color palette and font scheme files contain a simple XML format, which you can edit with your favorite text editor. The color palette file contains 89 color slots. This does not mean you have to use 89 colors, but rather that there are 89 different UI objects that form the basis of what you can affect. The main colors that make your planned look will repeatedly be used in the color slots. This gives you the flexibility of specifying which accent colors you want to use and where in the UI you want them to light up, allowing you to create different looks with the same colors. Each color slot has the following format:
Color name="BodyText" value="C3C3C3"
The color name uses semantic names so that you know where in the UI each color slot is used. Examples of color names are BodyText, SuiteBarBackground, SelectionBackground, ButtonBorder, ButtonBackground, and ButtonBorderOnHover.
You can also specify the opacity/transparency value for background colors, which use RGBA (red, green, blue, and alpha transparency) colors. The HEX values for the background color slots have eight digits and not six. The first two digits are used for transparency and the other digits define the color; for example, 20C3C3C3 has a transparency of 20 and a color of C3C3C3—which is RGBA (195, 195, 195, 0.13). This is important since different colors need different opacity, especially as the background colors are used to overlay the background image of the page and make the content of the page readable.
Note
A hex to and from RGBA calculator can be found at kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/.
For each color palette, there are four metadata values specified: the three color slots that will be used in the color picker and an inverted flag. You should choose the three colors that best represent the palette. The inverted flag indicates whether the color palate is a dark or light theme. If the inverted flag is set to true, then the palette is a dark theme where light text is displayed on a dark background. A light color palette is one that has dark text on a light background.
The following is an example of the contents of a color palette file:
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay"
previewSlot2="BodyText" previewSlot3="AccentText"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText” value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="Hyperlinkfollowed" value="663399" />
<s:color name="HyperlinkActive" value="004D85" />
<s:color name="CommandLinks" value="666666" />
<s:color name="CommandLinksSecondary" value="262626" />
<s:color name="CommandLinksHover" value="0072C6" />
<s:color name="CommandLinksPressed" value="004D85" />
<s:color name="CommandLinksDisabled" value="B1B1B1" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
<s:color name="DisabledBackground" value="FDFDFD" />
<s:color name="PageBackground" value="FFFFFF" />
<s:color name="HeaderBackground" value="D8FFFFFF" />
<s:color name="FooterBackground" value="D8FFFFFF" />
<s:color name="SelectionBackground" value="7F9CCEF0" />
<s:color name="HoverBackground" value="7FCDE6F7" />
<s:color name="ContentAccent5" value="ED0033" />
<s:color name="ContentAccent6" value="682A7A" />
</s:colorPalette>This contains seven font slots, again using semantic names so that you know where the fonts will be used: Title, Navigation, Small-Heading, Heading, Large-Heading, Body, and Large-Body. You can also specify a font for a specific language. If you intend to use web fonts, then the URLs to the four web font files (EOT, WOFF, TTF, and SVG) are required. Also, a large preview and a small preview image are needed for the font scheme picker. Web fonts do not provide the hover preview capability. Web fonts are downloaded only when they are chosen and then applied to the instance preview.
An extract of the font scheme file is displayed as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Bodoni" previewSlot1="title" preview-Slot2="body"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Bodoni Book" eotsrc="/_layouts/15/fonts/BodoniBook.eot"
woffsrc="/_layouts/15/fonts/BodoniBook.woff"
ttfsrc="/_layouts/15/fonts/BodoniBook.ttf"
svgsrc="/_layouts/15/fonts/BodoniBook.svg"
largeimgsrc="/_layouts/15/fonts/BodoniBookLarge.png"
smallimgsrc="/_layouts/15/fonts/BodoniBookSmall.png" />
<s:ea typeface="" />
<s:cs typeface="Segoe UI Light" />
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Tibt" typeface="Microsoft Himalaya" />
<s:font script="Yiii" typeface="Microsoft Yi Baiti" />
</s:fontSlot>
<s:fontSlot name="navigation">
<s:ea typeface="" />
<s:cs typeface="Segoe UI" />
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
</s:fontSlot>
</s:fontSlots>
</s:fontScheme>The easiest way to create a font scheme of a color palette is to download one of the out-of-the-box .spfont or .spcolor files from the 15 folder in the Theme Gallery. Make changes and upload it back into the library. There is a tool to help you; which can be found at www.microsoft.com/en-us/download/details.aspx?id=38182. The tool will take into consideration accessibility standards and color ratios, and provide a preview of the different UI objects and how the palette looks, thereby reducing the need to upload the files repeatedly into the Theme Gallery and test them using the browser. The tool groups together the color slots according to the type of UI objects they affect, which gives you a better understanding of the relationship of the color slots to each other, helping you create a better palette. The groups are:
If color palettes and font schemes do not meet your needs, you will probably need to create your own master pages and CSS files. Both of these processes take some time, especially if you are new to branding and have never tried to change the look and feel of a SharePoint site before, and you have no previous web design or development knowledge. Using a theme can be likened to painting your house; CSS is analogous to moving or hanging new pictures in your house; and using master pages is like adding an extension to your house.
When you want to change the structure of the pages and apply those changes to all pages within a site or across a number of sites, which is when you need to create a new master page. Master pages were introduced in Chapter 9.
Note
For more information about master pages, go to http://msdn.microsoft.com/en-us/library/jj191506(v=office.15).aspx.
When you use a browser to request a page from a site, it combines two Microsoft ASP.NET pages: a master page and a content page. A master page is a special ASP.NET 2.0 page that is used to provide a consistent appearance and navigation for each page within one or more sites. Components that are usually placed on master pages are your company’s branding images and logo; navigation tabs and links, such as a breadcrumb component and the Site Actions button; footer links, such as Contact Us, Accessibility, and Copyright statements; and links to CSS files and JavaScript files that contain common functions.
Each page in a site is initially configured to use the site’s default master page. The @Page directive at the top of the content page specifies the master page to be used. When you first create a SharePoint site, all pages but a select few use the site’s default master page. The MasterPageFile attribute of the @Page directive is set to token, ∼masterurl/default.master.
A master page cannot be viewed in a browser, and although you can create master pages using a web editing tool such as Microsoft Expression Web and then use the Design Manager to import it into SharePoint, you can still use SharePoint Designer to create master pages.
SharePoint Designer is a powerful tool that you can use to customize almost anything. You can create multiple master pages, so that your various sites look different. However, it is almost impossible for users or web designers who know very little about the underlying structure of SharePoint to figure things out. It is also easy to break master pages and content pages using the Code view of SharePoint Designer.
To set a master page as the site’s default master page, perform the following steps:
In the Navigation pane, click Master Pages and then click the icon to the left of the master page that you want to use as the site’s default master page, as shown next.
On the Master Pages tab, in the Actions group, click Set As Default.
You can modify which master page a content page uses. For example, you can specify whether you want to use the default master page or a different master page. Theoretically, each page within a site collection can use a different master page. Such a scenario would defeat the purpose of using master pages, however, because, as stated earlier, master pages were introduced to support a common look and feel across entire sites. However, making a content page use a specific master page can be very useful when you are developing a new master page because you can test your modification on one page without affecting all pages within a site.
To attach a master page other than the site’s default master page to a content page, perform the following steps:
In SharePoint Designer, browse to the content page; for example, in the Navigation pane, click Site Pages.
Click the icon to the left of the content page. On the Pages tab, click the down arrow on the Edit File command, and then Edit File in Advanced Mode.
Note
For more information on the advanced edit mode, see Chapter 9.
On the Style tab, in the Master Page group, click Attach, and then click the master page that you want to attach to the content page, as shown next.
You will see that the @Page directive at the top of the content page no longer uses the ∼masterurl/default.master token but points to a specific master page, such as the following:
<%@ Page Language="C#" Inherits=Microsoft.SharePoint.WebPartPages.WikiEditPage" MasterPageFile="../_catalogs/masterpage/SPFIIO.master" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Documet" %>
Save the content page, and if the content page is a site definition page, you will need to click Yes to the Site Definition Page Warning dialog box that is displayed. View the page in the browser.
Note
You can also use these steps if you have an .aspx page that is not associated with any master page. This can be very useful if you are migrating pages from a non-SharePoint site and you want the pages to look like all other pages within your site.
You can also create new content pages from a master page, and then add the necessary controls to the content page. However, users will not be able to amend the page in the browser if you do not include web part zones or the SharePoint control EmbeddedFormField. Therefore, especially if you want to create wiki pages, it is easier to create them by using the browser.
To create new content pages from a master page and then add the necessary controls, follow these steps:
In the Navigation pane, click Master Pages, and then, on the Master Pages tab, click Page From Master to open the Select A Master Page dialog box, shown next.
Select Default Master Page if you want to create the page from the site’s default master page, or select Specific Master Page if you want to create a page from a specific master page. Then click Browse to choose the specific master page.
Unlike content pages, master pages contain the tags <html>, <head>, <body>, and <form>. Master page file names have the extension .master, whereas content pages have an extension of .aspx. Master pages can also contain most of the content and functionality of content pages, including JavaScript, web parts (including Data Views and XLV Web Parts), and components such as the Search box and the component that displays the Quick Launch headings and links. Master pages cannot contain web part zones, however.
Each master page contains multiple core controls, which can be divided into four types:
Controls for links, menus, icons, and navigation components, such as the SiteMapPath control that populates the global navigation breadcrumb. SharePoint 2013 also contains a number of new SharePoint controls related to the theme engine, such as ThemedForegroundImage, which together with some CSS, tells the theme engine how to theme an image.
Content placeholders, such as the PlaceHolderMain control, that match areas on the content page where you can enter information.
Delegate controls, which define a region on the page in which content can be substituted or added by another control driven by feature activation. This allows you to customize your sites, for example, without customizing master pages. Three new delegate controls were added in SharePoint 2013: PromotedActions, SuiteBarBrandingDelegate, and SuiteLinksDelegate, which identify regions on the top area of each page, as shown in Figure 20-23.
Controls for scripts, which manage the communication of the page and assist with the ribbon, toolbars, and other controls.
You can include style information in a master page, but it’s good practice to use a CSS file linked to the master page. The key benefit of using a master page is that any global design changes to your site can be made in one place. By using a master page, you can design your site efficiently and quickly and avoid having to make changes on every page in the site. To locate and edit a master page, perform the following steps:
Open your SharePoint site in SharePoint Designer, and then, in the Navigation pane, click Master Pages.
Click the icon to the left of the master page that you want to edit, and then, on the Master Pages tab, click Edit File.
The master page opens in the workspace, and on the breadcrumb, the text Advanced Editor indicates that the page is open in Advanced Edit mode.
In the mini-gallery below the Navigation pane, right-click the master page that you want to edit, and then click Check Out. A green check mark appears to the left of the master page, as shown next.
If you want to make a simple customization to a master page, make a copy of the file, or create a blank master page and paste the contents from an existing master page into the blank master page. Make your changes to the copy and test those changes by attaching your copied file to a single page. Then when you have tested your changes, make your copied file the default master page, as described earlier in this chapter. It is good practice to never amend the files provided by Microsoft.
The key component of a master page is the content placeholder control. It is placed on the master page where content will eventually appear. The content page specifies which content placeholder the components should be placed in, such as
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> </asp:Content>
On the master page, the following code defines the content placeholder and specifies where on the page the content placeholder is located:
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> </asp:ContentPlaceHolder>
A master page typically has a number of content placeholders, the most important of which is PlaceHolderMain, which usually maps to the region on the master page where the elements from the content page should be placed.
To locate content placeholders on a master page, you can search for the control by clicking Manage Content Regions in the Master Page group on the Style tab. The Manage Content Regions dialog box opens, as shown in Figure 20-24, which lists all the regions on the page. Using this dialog box, you can rename, delete, or go to the placeholder.
Figure 20-24. Use the Manage Content Regions dialog box to locate, add, and remove content placeholders.
Note
You can use the earlier steps to navigate to content placeholders only when you are working with a master page. On content pages, when you want to find a reference to a content placeholder, and it is not obvious in Design view where that reference is, you need to use the Find functionality in SharePoint Designer.
Other placeholders contain components that you can decide not to incorporate in the page, on a content page–by–content page basis. That is, the components stored within a content placeholder in a master page can be viewed as optional. For example, the components that display the Quick Launch are stored in the master page in the PlaceHolderLeftNavBar content placeholder. When you create a web part page, the templates used has modified the contents of the PlaceHolderLeftNavBar so that the Quick Launch does not appear. Any placeholders you find on a content page do not inherit their content from the master page.
To create a Composed Look, you must have a master page, a preview page, and a color palette. The master page and the preview page are used to populate the layout picker in the Choose The Look page. The preview page must have the same name as the master page; that is, if the master page is named SPIO.master, then the preview page must be named SPIO.preview. Just as it is a good idea not to start with a blank master page, you should also not start with a blank preview page. Use an existing preview page as a basis for your preview page and open it as a text file.
The preview file contains four sections divided by [SECTION] delimiters. The first section points to the color palette to be used. The second section points to the default font scheme. The third section is tokenized CSS, and the last section is tokenized HTML, where class should be used and not IDs. The following is an extract of a preview file:
Palette001.spcolor
[SECTION]
SharePointPersonality.spfont
[SECTION]
[ID] .dgp-pageHyperLinkVisited
{
color: [T_THEME_COLOR_HYPERLINKFOLLOWED] !important;
}
[ID] #dgp-pageContainer
{
width: 100%;
height:100%;
position: relative;
color: [T_THEME_COLOR_BODYTEXT];
background-color: [T_THEME_COLOR_PAGEBACKGROUND];
font-size: 1.0em;
font-family: [T_BODY_FONT];
}
. . .
[ID] .dgp-tableheadertext
{
color: [T_THEME_COLOR_SUBTLEBODYTEXT];
}
[SECTION]
<div id="dgp-pageContainer">
<div class="dgp-background"></div>
<div class="dgp-background-ie8"></div>
<div class="dgp-pageContent">
<div class="dgp-suiteBar">
<div class="ms-tableRow">
<div class="dgp-suiteBarLeft">
<div class="dgp-globalleft">
[BRANDSTRING]
</div>
<div class="dgp-globalright">
<span class="dgp-spacing">[SUITELINK1]</span>
<span class="dgp-spacing">[SUITELINK2]</span>
<span class="dgp-spacing">[SUITELINK3]</span>
</div>
</div>
<div class="dgp-suiteBarRight">
<span class="dgp-globalRightLink dgp-globalleft">[WELCOME]</span>
</div>
…
<div>[CA ACCENT COLORS]</div>
<div class="dgp-contentBoxListHeader">[CA LIST TITLE]</div>
<table class="dgp-contentTable">[CA TABLE]</table>
</div>
</div>
</div>
</div>
</div>Like most industry-standard sites, SharePoint sites use CSS, and SharePoint Designer contains style sheet editors that make it easy to identify and edit the CSS rules and attributes. SharePoint Designer uses a set of configuration options to decide how it should add the CSS tags to your page. You can change these default settings from within the Page Editor Options dialog box, which you can open on the File tab by clicking Options.
CSS separates the look and feel from the content in your webpages. It is a declarative language that browsers use to format fonts, the color within the page, as well as the size and position of elements on the page. All modern browsers support CSS, and CSS functions exactly the same for SharePoint sites as it does with any other websites.
The main CSS file in SharePoint is Corev15.css, which contains over 13,000 lines of code and defines most of the styles you need to customize your site. Corev15.css is stored on the server in the root directory, %ProgramFiles%Common FilesMicrosoft SharedWeb Server Extensions15TemplateLayouts<LCID>Styles, where <LCID> is the locale for the language packs you have installed. You should not amend this file, but instead create your own style files, which contain only those styles from Corev15.css that you need to modify. All of the CSS files provided by Microsoft are linked into the master page using the SharePoint control:
<SharePoint:CssLink runat="server" Version="15" />
When the master page is merged with your content page, and the CssLink control is run on the server, one or more HTML <link> statements are generated and sent to the browser, together with the CSS files.
If you want to change the CSS styles for your site or a number of sites, and if you do not have a development environment, then create your own site collection—or if that is not possible, a test site. On your test site, create a new .css file in your site’s Style library, add the required CSS styles to your .css file, and then amend your master page and add the following code after the CssLink SharePoint control:
<SharePoint:CSSRegistration Name="%$SPUrl:∼SiteCollection/Style Library/∼language/Themable/SPFIO.css" After="corev15.css" runat="server" />
In the preceding example, SFPIO.css is the name of the custom .css file. The CSSLink control reads the information from the CSSResgistration SharePoint control and inserts a link tag into the page sent to the browser after the link tag for Corev15.css, thereby ensuring that your CSS styles are applied after the styles in Corev15.css. If you create multiple custom CSS files, you can also use the CSSRegistration control to ensure that your custom CSS files are applied in the correct order by using the After attribute.
You might need to reference image files from your CSS files. Upload these into the Style library in a subfolder named Images.
Earlier in this chapter, we discussed how to customize a master page and CSS files by using SharePoint Designer. You might now want other sites to use a master page, CSS files, and associated files. If you want other site owners in your site collection to use your design, you could export the master page from your site’s Master Page gallery and the associated files from your site’s Style library, and then upload them to the site collections Master Page gallery and Style library. You might need to change the URL reference specified in the Name attribute in the CSSRegistration control and references to images in your custom CSS file. Using relative URL references to files might overcome this problem.
When the publishing feature is activated, you can use the browser to apply master pages to a site or the whole of a site collection, by using the Master Page link under Look And Feel on the Site Settings page. However, if you want your master page to be available for all sites in all site collections in a web application, or you do not wish to activate the publishing feature on all site collections, then the best option is to deploy the master page plus its associated files as a feature. You will need Microsoft Visual Studio 2010 to create a feature. Visual Studio does not provide a master page designer; however, when teamed with SharePoint Designer, each tool can compensate for the other tool’s shortcoming. For example, SharePoint Designer stores any changes to the content database and provides no source code control. Visual Studio supports source control and can deploy files to the SharePoint server’s file system.
A site template, also known as a web template, is essentially a copy of a site that is saved using the browser and stored in the content database. And because it is stored in the content database and does not need to be stored on SharePoint servers, it is a compelling deployment model for custom SharePoint solutions, both on-premise and in Office 365.
When SharePoint is first installed, the basis for all new sites are files stored on the SharePoint servers, known as site definitions. New site definitions are created by developers and packaged as solutions, whereas you can use the browser to create site templates by clicking Save Site As Template under Look And Feel on the Site Settings page. And just like site definitions, site templates are created as solution files and saved in the site collection’s Solutions gallery, from which you can download and use them on other site collections.
Note
When a site template is created, whether it is when you used the Save As Template page or you have uploaded and activated a site template in the Solutions gallery, then for each site template, a new site collection feature is created, named Web Template Feature Of Exported Web Template <site name>.
Optionally, you can save content in the site template; however, you do not have the option to save publishing sites as site templates. When a developer creates web templates in Visual Studio, they can be based on publishing sites and use publishing features. Developers can also use a site template created using the browser as a basis for a web template. However, a site template contains many files and each file contains information that is needed to build a site, such as information about all content types defined at the site and site-collection level, even if those content types are not used to create a site from your site template. Developers using Visual Studio can select which information to import from a site template; however, it is difficult to determine the information that is required by a site template to create a site. For this reason, developers will use a site template as a basis for a web template only when small modifications are needed. Typically, developers create new web templates that reference a site definition, scoped at the farm or site-collection level.
In the browser when you create a site, users need not know the difference between site templates and site definitions. In fact, on the New SharePoint Site page, they are referred to as templates. However, site templates will be listed only under the Custom tab, whereas site definitions can be listed under any tab and are not usually listed under the Custom tab.
You can control which site templates can be used to create sites in site collections where the publishing feature is activated by clicking Page Layouts and Site Templates under Look And Feel on the Site Settings page.
When a site template is moved to another server or site collection, any features used by that template must be activated in the destination site collection’s Solutions gallery. If an out-of-the-box workflow is included as part of a site template, then the site-collection feature that enables the use of the workflow must be activated. SharePoint 2013 workflows are not included, as they are not stored within the site, but rather in the Workflow Manager databases.
Lists, libraries, Web Part pages, wiki pages, custom pages, navigational customizations, and versioning settings are saved within the site template. Content up to a limit of 50 MB can be saved. However, security settings, Web Part page personalizations, and user alerts are not included. Therefore, since no security settings are saved, any sensitive content saved in the site template can be viewed by users on sites created from site templates.
Site templates include references to activated features, both site collection and site features, therefore before you create a site template, it is best to create a site collection with a blank site at the top level of the site collection and then activate those features you need. Using the browser, a site (whether it is a top-level site of a site collection or a subsite) cannot be created using the Blank Site template; you will need to use Windows PowerShell.
Unless you are going to get a developer involved, you will need to document those site-collection features that must be activated and pass that information on to any users who will use the template. If you do not activate a dependent feature prior to using the template, the site creation process will fail. If you try to create a site from a site template when a feature that it is dependent on is not activated, you will see the error message stating that the site template requires a feature, and providing you with the GUID of the feature. The browser error message references a correlation ID, which can be used to find more information from SharePoint’s ULS logs, which are located on the SharePoint servers in the LOGs folder. When developers create site templates or site definitions, they can ensure that any dependent components or features are activated as part of the site creation process.
SharePoint Designer is a tool that you can use when designing SharePoint sites and solutions. It is the tool to use when creating workflows and can be used to create external content types. With the demise of Design view, it no longer is a no-code form editing tool; however, SharePoint Designer can be used as a tool that site or site-collection owners can use to manage their sites.
SharePoint Designer can also be used to help you design your sites when you do not have the Design Manager available or you wish to develop complex master pages. You can also use it to amend XML and CSS files, such as the new color palette (.spcolor) and font scheme (.spfont) files or Corev15.css.
For those organizations that implement development, test, and production environments, SharePoint Designer can be used in the preproduction environments, and amendments can be transferred to the production environment in a controlled manner. SharePoint Designer is safe by default when editing pages and its usage can be controlled at the web-application and site-collection levels.
You can use site templates as a basis for new sites. You can also limit which site templates can be used as a basis for new sites.