It can sometimes be tricky to find the right element to change. Learn how to use the developer tools to pinpoint the proper place and test your changes in a safe way.
- [Instructor] All right, welcome to the most difficult…video of this entire course.…Let's walk through the developer tools…and get comfortable with them.…Now, when you're determining which element to work with,…it can frankly be a little tricky.…As you can see from the inspector pane,…the HTML has got a lot of elements.…Microsoft calls a lot of elements at a time.…SharePoint works off of a multitude of style sheets…and elements are nested within elements…that are nested, et cetera, et cetera, et cetera.…
So if you're not an expert site developer,…there's going to be some trial and error…as you experiment with your site styles.…The good news is you can do your experimentation right here…without the risk of breaking anything.…Anything that you do on this page is temporary…and you can set everything back to default…by simply refreshing the browser page.…So let's demo how to find an element,…how to make a change and test it.…I'm going to start with something really obvious…so that it'll immediately show up.…
Oh I know, let's remove the search bar.…
- Changing your site's logo, title, and theme
- Creating new palettes and themes
- Loading fonts to your site
- Calling font sets in your theme
- CSS basics for branding SharePoint
- Creating and uploading a blank CSS style sheet
- Modifying site navigation, fonts, and backgrounds
- Styling tables
- Defining new elements in your CSS file
- Creating new CSS elements directly into the style sheet
Skill Level Intermediate
SharePoint Online 2017: Beyond the Basicswith Gini von Courter3h 32m Intermediate
1. The Branding Hierarchy
2. Creating a Custom Theme: Colors
3. Adding New Fonts
4. CSS Basics for Branding SharePoint
5. Modify SharePoint with CSS
6. More Styling: Page Elements
7. Getting Fancy: Custom CSS Elements
Next steps1m 31s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.