The SharePoint built-in theming tool is easy to use, but it's also possible to use CSS to change classic page colors and fonts, and add background images. This video shows some of the possibilities for site-wide page styling with CSS.
- [Instructor] The older, classic style of SharePoint,…does not have as many bells and whistles…as the the new pages,…and there are less ways to style them.…This is the Page Not Found publishing page,…that comes more or less automatically with every site,…but it's a good example of what a classic page looks like.…Now, I frankly think that Microsoft…made some weird choices about how they set this page up.…But we'll go ahead, we'll turn on Developer,…and using the Pinpoint tool,…we can see that the main content area is right here,…and so let's use this ID content box,…and I think this will be pretty universal.…
We'll go ahead and change the background color on this.…Let's do our good old friend burlywood.…Okay, there, changed the background color.…You can see that happens pretty good.…Now, if you want to change the background of the page…to a color, or an image,…then you're going to need to use the ID S4 Body Container.…Let's see if we can find that here.…Well, you know what?…I already know that this is the one,…
- 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.