3.4 Theming Your Presentation
The examples you’ve seen so far used the default black theme, but there are actually eight more themes you can choose from, and you can even create your own.
So let’s take a closer look at how you can theme your presentation.
1.Introduction1 lesson, 01:33
1.1Welcome to the Course01:33
2.Installation and Basic Usage3 lessons, 16:19
2.1The Simple Installation04:04
2.3Installing Reveal.js on a Local Web Server06:01
3.Advanced Use of Reveal.js5 lessons, 42:38
3.1Using Markdown to Create Slides05:27
3.2Configuring Your Presentation12:36
3.3Slide Backgrounds, Transitions, and Fragments13:38
3.4Theming Your Presentation03:52
3.5Other Useful Features07:05
3.4 Theming Your Presentation
The examples you've seen so far used the default black theme. But there are actually eight more themes you can choose from, and you can even create your own. So let's go ahead and check out some of the other things and find out more about how to theme your presentation. We'll start right here in the head section of our page, where, by default, we're loading this, css/theme/black.css. This is the default theme. But there are actually eight more which can be found in the same folder, so CSS > Theme, and you can see the other ones here. And to change a theme, all you have to do is load the specific style sheet right here. So, here is the white theme. It looks something like this. Here is league. And notice these teams have different fonts applied, different colors, different backgrounds. Here is beige. And then sky. Here is night. Also a dark theme. Then we have serif. Which uses some nice serif fonts. Then we have a simple theme which is very basic And then we have solarized, Which looks like this. Now, creating your own theme is actually very, very simple. What do you have to do is go to CSS > Theme > Source. And you can find the CSS files for these themes. You have to duplicate one of them. Let's say for example white, so just copy and paste. And now, let's rename this to custom.scss. Now in here, the only thing that you have to change is this section where it says Overwrite Theme Settings. Basically these are some variables, and you can change their values to match the style that you want. So just to test things out, let's change this background color to red, okay? And if I go to my file here, and I load custom.css, refreshing my page will let me use my newly created theme. It's really that simple. Now, I'm not gonna create an entirely new theme here, because this course is already too long. I just thought I'd show you how you can do it. The rest is really up to you to create a theme that works with your brand, with what it is you want to present. Because this is HTML and CSS, it's real easy to customize everything. Now, before we wrap up this course, I want to quickly touch on two features that I think are really cool. And that is speaker notes and PDF Export. We'll briefly look at those in the next lesson.