From the course: reveal.js: Online Presentations

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Modifying existing CSS themes

Modifying existing CSS themes

From the course: reveal.js: Online Presentations

Start my 1-month free trial

Modifying existing CSS themes

Adding your own CSS is super simple. You can create regular in-line, embedded, or even roll your own versions of an existing stylesheet. It's really no different than working with any other CSS. Let's take a look at the structure of the CSS files so that we can understand what to do and we'll create a new template based on an existing theme. So I'm going to go into the index.html file and you can see right here that it's calling revealmin.css. And then right underneath that, it's calling one of the themes. So if you take a look at reveal.min.css you'll see that it's a CSS file that's been compressed. So we need to actually look at this one which is the uncompressed version. And this has a bunch of reset styles which means trying to make styles that look the same in different browsers. And then some basic, basic styles plus what they call fragments here, which is the animations here that reveal.js uses. And this one is quite long. We really don't mess at all with this reveal.css file…

Contents