Once you have your custom CSS elements created, how do you use them to style pages? This video demonstrates using the "embed script" widget on a Web Part Page, and editing the HTML source to call your CSS to specific areas.
- [Instructor] Okay, so we've created custom elements.…Now how are we going to use them.…The bad news is, that we're not going to be able to use…the style sheet to give us a site wide solution.…We're actually going to need to infuse our code into…individual pages where we want our elements to take effect.…The good news is it's pretty easy to do this,…and we only have to add it once per page as opposed…to every content area.…
Plus your code can be re-used over and…over and over in your site.…Lets look at a blank web part page in edit mode.…Now first thing that we need to do,…by the way I want to tell you I love these web part pages.…If you haven't looked at them, all of these areas here…you can add web parts to all of these really handy…flexible page.…All kinds of widgets can go in.…That's a little side bar.…But we're going to start by embedding some code…into the page.…
So we'll click into the Insert.…And we will embed code.…Now what we need to do in here,…we're going to have to call the CSS that we want in this…
- 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.