SharePoint 2019: Customizing with Themes and CSS

Use built-in SharePoint Online 2019 functionality and custom CSS to control the look and feel of your SharePoint sites. Discover how to change colors, fonts, and page elements.

Introduction

• Create unique SharePoint sites
• What you need to know
• Get the most out of this course

1. CSS Basics for Branding SharePoint

• The Microsoft recommended branding hierarchy
• Why use CSS?
• Create and upload a blank CSS stylesheet
• Link the stylesheet to your site
• Edit the stylesheet
• Challenge: Update the stylesheet
• Solution: Update the stylesheet

2. Modify SharePoint with CSS

• Browser developer tools
• Knowing what CSS elements to change
• Modify site navigation fonts and backgrounds
• Modify site navigation widths and drop-down menus
• Modify site navigation placement
• Challenge: Modify the navigation font and background colors
• Solution: Modify the navigation font and background colors

3. More CSS Styling: Page Elements

• "New experience" pages
• Style "classic experience" pages
• Styling tables
• Challenge: Modify a classic Web Part page
• Solution: Modify a classic Web Part page

4. Get Fancy: Custom CSS Elements

• Custom CSS elements: Initial considerations
• Define new elements in your stylesheet
• Allow for variable states
• How to use your custom CSS elements
• Challenge: Create a new CSS element
• Solution: Create a new CSS element

5. Onboard Branding Tools and Custom Themes

• Change site logo and title
• Change site colors and theme
• Is adding a custom palette necessary?
• Create and modify a color palette
• Create a new theme with your palette
• Challenge: Create, modify, and load a theme
• Solution: Create, modify, and load a theme

6. Add New Fonts to a Theme

• Best practices: Why do you need new fonts?
• Sources for fonts
• Load fonts to your site
• Call font sets in your theme
• Challenge: Add a font to your new theme
• Solution: Add a font to your new theme

Conclusion

• Next steps