SharePoint 2019: Customizing with Themes and CSS

Course details

SharePoint Online boasts built-in functionality that can help you modify the look and feel of your SharePoint site. Using themes and CSS, you have control over your site's appearance, and can create a more customized experience for your users. In this course, Phil Gold walks through the Microsoft recommended approach for branding SharePoint, and explains how to use built-in tools and CSS to change colors, fonts, navigation, table layouts, and even page elements. He also shares his recommendations for when to use CSS to change branding elements in your SharePoint site, and when it's best to stick with the built-in tools.

Learning objectives
CSS basics for branding SharePoint
Creating and uploading a blank CSS style sheet
Editing a stylesheet
Determining which CSS elements to change
Modifying site navigation, fonts, and backgrounds
Creating new palettes and themes
Loading fonts to your site
Calling font sets in your theme
Styling tables
Defining new elements in your stylesheet

Concepts

0. Introduction

01 - Create unique SharePoint sites
02 - What you need to know
03 - Get the most out of this course

1. CSS Basics for Branding SharePoint

04 - The Microsoft recommended branding hierarchy
05 - Why use CSS
06 - Create and upload a blank CSS stylesheet
07 - Link the stylesheet to your site
08 - Edit the stylesheet
09 - Challenge - Update the stylesheet
10 - Solution - Update the stylesheet

2. Modify SharePoint with CSS

11 - Browser developer tools
12 - Knowing what CSS elements to change
13 - Modify site navigation fonts and backgrounds
14 - Modify site navigation widths and drop-down menus
15 - Modify site navigation placement
16 - Challenge - Modify the navigation font and background colors
17 - Solution - Modify the navigation font and background colors

3. More CSS Styling - Page Elements

18 - New experience pages
19 - Style classic experience pages
20 - Styling tables
21 - Challenge - Modify a classic Web Part page
22 - Solution - Modify a classic Web Part page

4. Get Fancy - Custom CSS Elements

23 - Custom CSS elements - Initial considerations
24 - Define new elements in your stylesheet
25 - Allow for variable states
26 - How to use your custom CSS elements
27 - Challenge - Create a new CSS element
28 - Solution - Create a new CSS element

5. Onboard Branding Tools and Custom Themes

29 - Change site logo and title
30 - Change site colors and theme
31 - Is adding a custom palette necessary
32 - Create and modify a color palette
33 - Create a new theme with your palette
34 - Challenge - Create, modify, and load a theme
35 - Solution - Create, modify, and load a theme

6. Add New Fonts to a Theme

36 - Best practices - Why do you need new fonts
37 - Sources for fonts
38 - Load fonts to your site
39 - Call font sets in your theme
40 - Challenge - Add a font to your new theme
41 - Solution - Add a font to your new theme

Conclusion

42 - Next steps