The SharePoint Branding Experience

Branding has always seems like voodoo to me. Now that I can see what’s going on behind a SharePoint page, I am going to dive in to several half-finished portal rollouts and start rebranding things the right way.
– Greg B.

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

  • Access to over over 18 hours of audio and video instruction
  • 44 recorded screencasts and electronic lecture notes with diagrams
  • 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
  • 6 months of access to course recordings and electronic lecture notes
  • 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:

  • Lists, content types, branding file types and more
  • Branding file storage
  • Working with the web server vs. content database
  • Managed vs. structured navigation
  • Benefits of publishing sites vs. non-publishing sites
  • Designing for SharePoint sites
  • Working with SharePoint Designer 2013
  • Using a mapped network drive

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:

  • What components belong in a master page
  • Using ContentPlaceHolders vs. Content Controls
  • Understanding why you have one master page vs. many content pages

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

Master page creation and editing

It is time to get comfortable with Code View and other editors as you 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 include:

  • Mixing in your custom HTML or HTML5
  • Adding, editing and hiding ContentPlaceHolders
  • Manipulating the ribbon area
  • Using Security Trimmed Controls
  • Hiding the Ribbon from different user groups
  • Manipulating SharePoint navigation
  • Adding breadcrumb to pages and custom options under Site Actions
  • Applying custom master pages to non-publishing sites like Team sites

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

Covered concepts apply to SharePoint 2016. All code samples provided are for SharePoint 2013.

System Requirements

  • Access to a SharePoint 2013+ site, preferably a top level site collection, based on the Enterprise Wiki or Publishing site template with administrator rights
  • 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

Want an overview of branding options for Office 365/SharePoint Online?

With the steady shift (or push in many cases) to Office 365 and SharePoint Online, how to make your site “not look like SharePoint” is quickly becoming a confusing topic. Between the options, the opinions and the limitations of working within Office 365, knowing which direction to take in regards to branding can be a tough call.