The SharePoint Branding Experience
Don’t be wooed by the excitement of the Design Manager in SharePoint 2013/2016. There is still no magic EASY button for SharePoint branding. But it doesn’t have to be hard either. In this class you will learn how not to be intimidated by .NET code while successfully branding your SharePoint site to make it look how you want – layout, colors, fonts, you name it. You got the design and now you need the where and how. That is where the SharePoint Branding Experience course begins.
SharePoint Version: 2013, 2016 and SharePoint Online
Author and instructor: Heather Solomon
Complementary courses to the SharePoint Branding Experience:
* Please note that these are not pre-requisite courses.
Want to be wooed by Design Manager?
Then check out our on-demand SharePoint 2013 Design Manager Workshop.
Looking for a SharePoint 2010 branding course?
Please look at our on-demand SharePoint 2010 Branding Experience course.
Key takeaways for this course
- 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
- SharePoint Designer 2013 (suggested if you want to follow along with the instructor for all exercises)
- Speakers or headphones for course audio
- OPTIONAL: Dual monitor setup – it helps to have the course video stream on one monitor and your test environment on the other monitor so you can avoid flipping between two applications.
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
- Adding, editing and hiding ContentPlaceHolders
- Integrating custom CSS
- Using Security Trimmed Controls
- Manipulating SharePoint navigation
- Hiding the Ribbon from different user groups
- Creating a second master page file (why just stop at one?)
If you want a leg up, a boilerplate master page that uses a CSS based layout is available – 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 SharePoint Designer, outside code editors and browser tools, you will see many different ways to manipulate the SharePoint interface using CSS. 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
- 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
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 – 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 and 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
The heart of branding SharePoint isn’t comps, colors or graphics… it is code. That is why the entire course focuses on how to read it, create it and edit it. However there are other components to the branding process so 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