Duration: 4 days

SharePoint Brand Camp is an intensive 4-day course for web designers and advanced SharePoint users who need to learn SharePoint-specific techniques to design web pages and brand websites in a SharePoint 2013/2016 and O365 environment. You will also learn how to create and design custom master pages that work in Publishing sites as well as in Team sites. You will learn how to override and extend the core CSS styles that give SharePoint 2013 sites their standard look and feel. You will also learn how to customize the look and feel of publishing pages by creating custom page layouts. SharePoint Brand Camp 2013 spends time focusing on the SharePoint branding features that are new with SharePoint Server 2013. You will learn how to configure Managed Navigation within a Publishing site as well as how to create publishing pages with friendly URLs.

The course examines the new Designer Manager features along with its strengths and limitations. You will learn to use Design Manager to convert a pure HTML page layout into a SharePoint master page and to add common SharePoint page elements using Design Manager snippets. You will also see how to leverage the Content By Search Web Part as well as how to customize it output using a display Template. The course examines responsive design and device channels and discusses best practices for targeting users with tablets and various types of mobile devices. The last part of the course covers other advanced SharePoint publishing features including Variations, Catalog Sites and Cross-site Publishing.

Students should have a basic knowledge of HTML and CSS. It is also recommended (but not required) that students have previous experience with
SharePoint, working with team sites and/or publishing sites, as well as web design tool such as SharePoint Designer or Dreamweaver.


Module 01: Branding and Website Design

This module begins with an overview of branding, website design, and usability best practices. It poses essential questions that should be asked at the start of any SharePoint 2013 branding project, such as who is the intended audience and which browsers and devices should be supported. The module introduces the developer tools built into Chrome and the Internet Explorer as well as Firebug in FireFox. The module will also discuss which aspects of HTML5 should be used in a modern website design.

  • Branding and Website Design
  • Determining the target audiences
  • Cross-browser compatibility
  • Web designer tools for HTML and CSS
  • Tablets and mobile devices
  • What do you need to know about HTML5?


Module 02: Team Sites Versus Publishing Sites

This module discusses essential similarities and differences between Team sites and Publishing sites. You will learn how to create and utilize site columns and content types to track content in a SharePoint list. You will also be given an overview of the Publishing features in SharePoint 2013 and learn how the SharePoint publishing scheme is based on publishing pages and page layouts. The module will also discusses the differences between how navigation is configured in a Team site versus a Publishing site.

Topics Covered

  • SharePoint Site Fundamentals
  • Understanding Team Sites
  • Site Columns and Content Types
  • Understanding Publishing Sites
  • Navigation in a Publishing Site

Hands-on Lab: Working with Team Sites and Publishing Sites

  • Exercise 1: Working with a Team Site in SharePoint 2013
  • Exercise 2: Activating and Deactivating the MDS Feature
  • Exercise 3: Working with a Publishing Site in SharePoint 2013
  • Exercise 4: Configuring Anonymous Access for Testing Purposes
  • Exercise 5: Creating, Editing and Approving Publishing Pages


Module 03: SharePoint and Branding Assets Overview

This module explains how SharePoint 2013 processes pages in a SharePoint site by integrating .aspx pages together with master pages and CSS. You will learn about the standard SharePoint branding elements added to every sites such as the Master Page Gallery and the master pages included out of the box. The module also explains the difference between site pages and application pages from the perspective of a web designer. The final section of this module introduces the new Composed Looks feature of SharePoint 2013 and shows how it can be used to change the look and feel of the current site.

  • Branding in SharePoint
  • Team Site Design Assets
  • Applying a Composed Look
  • Publishing Site Design Assets
  • Applying a new Master

Hands-on Lab: Working with SharePoint Branding Assets

  • Exercise 1: Opening SharePoint Sites using SharePoint Designer 2013
  • Exercise 2: Use SharePoint Designer 2013 to Upload a Custom Master Page
  • Exercise 3: Approving and Applying a Custom Master Page


Module 04: Using CSS in SharePoint 2013

This module teaches students best practices for working with CSS in SharePoint. The module begins with an overview of CSS in SharePoint, then discusses the role of corev15.css, and how to work with and around it. The next section covers implementing a custom CSS and takes a deep dive into the use of browser Web Developer Tools to target and override default SharePoint styles.

  • Quick review of CSS
  • CSS in SharePoint
  • Styling a SharePoint site using a custom CCS file
  • Reverse Engineering HTML and CSS
  • Writing and maintaining CSS for SharePoint

Hands-on Lab: Using CSS in SharePoint 2013

  • Exercise 1: Styling a Layout Using CSS
  • Exercise 2: Use Developer Tools to Find and Overwrite corev15.css Styles
  • Exercise 3: Add Web Font with @font-face
  • Exercise 4: Adding an Alternate CSS


Module 05: Introduction to Design Manager

This module provides an in depth look at what the Design Manager is and its role in branding SharePoint Publishing sites. You will learn how to create a branded SharePoint site from an HTML and CSS prototype. This module will introduce the Snippet Gallery and Device Manager, which will both be discussed greater detail in later modules of this course. The final section of this module will cover creating, exporting, and importing Design Packages.

  • Introduction to Design Manager
  • Mapping a drive to a Publishing site
  • Converting HTML pages into Master Pages
  • Working with Design Manager Snippets
  • Other Design Manager Features
  • Design Packages

Hands-on Lab: Working with Design Manager

  • Lab Setup: Change Site and System Master Page back to Seattle
  • Exercise 1: Mapping the Master Page Gallery
  • Exercise 2: Upload brand assets to the Master Page Gallery
  • Exercise 3: Converting an HTML file to a Master Page (.master)
  • Exercise 4: Publish and Apply wingtip.master
  • Exercise 5: Adding a Snippet to a Master Page
  • Exercise 6: Creating a Design Package


Module 06: Master Pages in SharePoint 2013

This module is dedicated to understanding and customizing master pages in a SharePoint 2013 environment. The first section provides a thorough walk through of seattle.master, reviewing necessary placeholders, server controls, and their location within the master page. You will also learn about the additional placeholders and server controls available in the Snippet Gallery, and their uses. This module also covers configuring the Ribbon, as well as changing the location and appearance of the standard SharePoint navigation controls.

  • Master Pages in SharePoint 2013
  • Walkthrough of seatle.master
  • Creating Custom Master Pages
  • Designing your own Starter Master Page

Hands-on Lab: Creating and Testing Custom Master Pages

  • Exercise 1: Creating a Custom Master Page
  • Exercise 2: Linking a Custom Master Page to a CSS File


Module 07: Page Layouts

This module provides students with the knowledge to create custom page layouts. The first sections discusses the role of Page Layouts in a SharePoint Publishing Site. Next, you will learn how to create a Page-derived content type which can be associated with one or more page layouts. Next, you will then learn how to create and customize page layouts using SharePoint Designer, as well as using Design Manager. The final section covers configuring page layouts in publishing sites to control which page layouts are available in a specific site as well as how to assign the default page layout.

  • Overview of Page Layouts
  • Creating Page-derived Content Types
  • Creating Page Layouts with SharePoint Designer
  • Creating Page Layouts with Design Manger.
  • Configuring Page Layouts in a Publishing Site

Hands-on Lab: Creating and Configuring Page Layouts

  • Exercise 1: Creating Site Columns and a Page-derived Content Type
  • Exercise 2: Creating a Custom Page Layout


Module 08: Web Parts and XSLT

This module covers the use of web parts, and styling them using CSS and XSLT. First, the module presents an overview of web parts available in SharePoint 2013 out of the box. The module will emphasize web parts commonly used in publishing sites which include the Table of Content Web Part, the Summary Links Web Part and the ever-popular Content Query Web Part. The modules then moves on to discuss how to style these web parts using XSLT which will involve a quick primer on the XSLT language and simple ways to use it along with CSS to customize the look of content displayed using web parts such as the Content By Query Web Part.

  • Overview of Web Parts in SharePoint 2013
  • The Table of Content Web Part
  • The Summary Links Web Part
  • The Content Query Web Part
  • Customizing Web Part Display using XSLT

Hands-on Lab: Customizing Sites using Web Parts and XSLT

  • Lab Setup: Master Page Change and Content Builder
  • Exercise 1: Configure the Summary Links Web Part
  • Exercise 2: Adding Web Parts to a Publishing Site
  • Exercise 3: Working with the Content By Query (CBQ) Web Part
  • Exercise 4: Customizing Content By Query (CBQ) Web Part Output using XSLT


Module 09: Display Templates in SharePoint 2013

This module covers the fundamentals customizing the display of content in SharePoint 2013 using display templates. The module begins with a quick primer on JavaScript programming fundamentals focusing on the aspects of the JavaScript language which are required when designing and writing display templates. Next, you will learn how to create and configure a simple display template for a standard SharePoint list to customize the display of items on a page. Next, you will learn more advanced techniques for creating and configuring a custom search result type along with an associated display templates which make it possible to customize the appearance of search results using the Content by Search web part.

  • World’s Fastest JavaScript Primer
  • Creating a Display Template for a Standard List
  • Display Templates used in SharePoint 2013
  • Using Display Templates with Search Results
  • Using the Content Web Search (CBS) Web Part

Hands-on Lab: Creating and Configuring Display Templates

  • Exercise 1: Adding JavaScript code to a page using the Script Editor Web Part
  • Exercise 2: Customizing a SharePoint List Display Template using JavaScript
  • Exercise 3: Creating Display Templates for Search Results
  • Exercise 4: Configuring the Content By Search Web Part with a Display Template


Module 10: Responsive Design and Device Channels

This module discusses how to implement a responsive design to optimize a SharePoint site for access by mobile devices as well as how a responsive design can be complimented through the use of device channels. Students will learn about the motivation, concepts and terminology involved with a responsive design and will also learn how to implement a responsive design using pure HTML, CSS, JavaScript and media queries. After introducing responsive design, the module then explains how device channels can be used as a tool to compliment or replace a responsive design created with pure HTML approach. The module concludes by explaining how page layouts can created which target specific device channels when outputting HTML, CSS and JavaScript which can add a powerful dimension when targeting modern types of devices such as tablets and mobile devices.

  • Introduction to Responsive Design
  • Understanding Media Queries
  • Device Channel Configuration for Mobile
  • Customizing Page Layouts with Device Channels

Hands-on Lab: Working with a Responsive Design and Device Channels

  • Lab Setup: Master Page Change
  • Exercise 1: Writing Media Queries
  • Exercise 2: Creating a Device Channel
  • Exercise 3: Associate a Master Page with a Device Channel


Module 11: Composed Looks

This module covers creating and applying a customized composed look to a team site. The module begins by reviewing the OOB look, and how to make simple modifications to them. Next you will learn to create custom font and color files that can be used to create a composed look. The last section addresses when and how to create a custom master page and CSS to add to the font and color files to create a fully branded team site.

  • Anatomy of a Composed Look
  • Modifying a Composed Look
  • Creating an .spcolor file using the Color Palette Tool
  • Creating an .spfont file for a custom Composed Look
  • Creating and Configuring Custom Composed Looks
  • Packaging and Distribution

Hands-on Lab: Composed Looks

  • Exercise 1: Changing the Logo of a Team Site
  • Exercise 2: Modify an OOB Composed Look
  • Exercise 3: Create a Custom .spcolor File
  • Exercise 4: Create a Custom .spfont File
  • Exercise 5: Create a Custom Composed Look


Module 12: Advanced Publishing SharePoint Features

This module gives an overview of a few additional advanced Publishing features provided by SharePoint 2013. Discussions will include configuring SEO, using variations, creating catalog sites and implementing cross-site publishing.

  • Understanding SharePoint SEO Features
  • Adding Multilingual Support using Variations
  • Understanding the Use of Catalog Sites
  • Implementing Cross-site Publishing

World Education Alliance This class is offered by a World Education Alliance partner.