The SharePoint Branding Experience

Design Manager isn’t exactly an EASY button for SharePoint branding. Things are best done by hand, but that doesn’t mean it has to be hard. In this course you will learn how not to be intimidated by .NET code while successfully branding your SharePoint site. You can make your site look how you want – layout, colors, fonts, you name it. You got the design and now you need the where and how.

Key Takeaways

  • The know-how to brand a large SharePoint implementation, from Master Pages to CSS branding
  • Confidence in your ability to effectively use Master Pages, Page Layouts and Device Channels
  • The knowledge on how to brand your site with the least number of files and in the most effective, template based way
  • Session recordings and electronic lecture notes with post-class revisions and updates
  • A large code repository filled with CSS tips and tricks

In-Depth Course Syllabus

Introduction to SharePoint, publishing sites & SharePoint Designer

Starting from a designer’s perspective, this introduction walks through key bits of the SharePoint interface and architecture that will affect your design and site structure. Topics include:

  • Publishing sites vs. non-publishing sites
  • Web server vs. content database
  • Content types, apps, lists and libraries
  • Managed vs. structured navigation
  • Code and design tools, including SharePoint Designer 2013

Understanding master pages and content pages

You know you need one, you just aren’t sure what, where and how many. Deep dive into the key components of a master page and content page and truly understand how they work together and for you. And no one should start with an out-of-the-box SharePoint master page for custom SharePoint branding! Items discussed:

  • Getting comfortable with the key code bits in a master page and content page
  • Learning how master pages are referenced and used in your site
  • Understanding file customization (or unghosting) and rolling back customizations

Wrap up by editing a content page in SharePoint Designer to see first hand how the process works.

Master page creation and editing

Who needs Design View anyways? Don’t fear this missing feature from SharePoint Designer 2013. It is time to get comfortable with Code View and other editors to start work on your custom master page. Using semantic HTML and integrating in HTML5, you will create a master page from scratch. Master page edits will venture into:

  • Mixing in your custom HTML or HTML5
  • Adding, editing and hiding ContentPlaceHolders
  • Integrating custom CSS
  • Using Security Trimmed Controls
  • Manipulating SharePoint navigation
  • Hiding the Ribbon from different user groups
  • Adding breadcrumb to pages and custom options under Site Actions
  • Creating a second master page file (why just stop at one?)

A boilerplate master page that uses a CSS based layout will be provided to you. This is a student exclusive.

CSS, and a lot of it

Once your master page is setup the real work begins. The mass majority of SharePoint branding revolves around CSS (Cascading Style Sheets). Using tools such as SharePoint Designer, outside code editors and browser add-ons, you will see many different ways to manipulate the SharePoint interface using CSS. SharePoint Designer is not required!. Basic and advanced CSS topics will be covered, such as:

  • Understanding CSS specificity and why the order of the files doesn’t really matter
  • Using the CSS box model
  • Switching out SharePoint images for custom files (using CSS only)
  • Replacing content on the page with icons, images and/or new text
  • Converting to a fixed width design
  • Branding the SuiteBar, Ribbon, header, search and both navigation areas
  • Implementing web fonts and icon fonts
  • Introducing responsive web design
  • Recognizing how to stop using !important

Device Channels

In SharePoint you have an alternative to CSS media queries and a way to provide content to specific devices, such as iPhones, Android devices and assorted tablets. Take a look into Device Channels and create a few in class. The subject matter will cover:

  • Creating a Device Channel
  • Understanding when to use a Device Channel
  • Putting Device Channels to work for adaptive design and device/environment specific content

Page layouts for publishing sites

The key to every successful publishing site is a great and useful set of page layouts. They are the ideal way to centrally connect and manage content in your web pages. There is a distinct process to get a page layout up and going. There are also lots of customizations you can do including security trimmed content, web part zones and areas that only show in edit mode. Topics covered:

  • Creating multiple page layouts and knowing when they are needed
  • Using field controls and edit mode only panels
  • Adding web part zones and web parts
  • Integrating Security Trimmed Controls and Device Channel Panels
  • Controlling the page layouts allowed for sites

Bonus materials

The heart of branding SharePoint isn’t comps, colors or graphics, it is code. This entire training focuses on how to read it, create it and edit it. However there are other components to the branding process. The following bonus materials are provided for your personal review:

  • Learning about SharePoint taxonomy and content types
  • Building a design for SharePoint
  • Working with the SharePoint ribbon
  • Plus additional diagrams, code samples and more for topics covered in and outside of class

System Requirements

  • OPTIONAL*: SharePoint Designer 2013 (suggested if you want to follow along with the instructor)
  • OPTIONAL*: Simple code editor of your choice such as:
  • Speakers or headphones for course audio
  • OPTIONAL: If you have access to a second monitor it can aid with viewing the course while trying out exercises

* While both of these system requirements are marked as optional, you will need to have at least one of these editors installed for class.