Custom CSS (Pro)
The editor uses LESS, though plain CSS works as well. We apply the styles in real-time as you type so there's no need to leave the editor or even press a refresh button to see what you're getting. Note that when your styles are saved they will be automatically wrapped in a ".reveal {}" selector to avoid conflicts with other page styles.
Custom Fonts
You can load custom fonts from Typekit and Google fonts and apply them to your content using CSS. Find out more.
Developer Mode
If you turn on the developer mode you'll be able to easily add custom classes to any focused element. This is a great way to apply your CSS to specific elements.
Slide Classes
You can use special syntax ("//= class-name") to specify custom class names that should be made available through the presentation editor interface. This makes it convenient to apply classes to a subset of your slides. Here's an example class that turns class that blurs the given slide:
//= blurry-slide
.blurry-slide { filter: blur(5px); }
Example Selectors
Here's a set of example CSS selector that you can use when styling specific parts, such as the control arrows or background, of your presentation.
// Apply a background color to all slides
.slide-background {
background-color: indigo;
}
// Control arrow color
.controls button {
color: #ff0000;
}
// Fill color for the presentation progress bar
.progress span {
background: #ff0000;
} // Body text color
.slides {
color: #009999;
} // Link color .slides a { color: red; } // Turn text white if the slide has a dark background .has-dark-background { color: #fff; } // Larger slide numbers (if slide numbers are enabled for the deck)
.slide-number {
font-size: 20px;
} // Add a blue border to all slides (each slide is a <section>) .slides section { outline: 1px solid blue; } // Add a red border to all vertical stacks of slides .slides section.stack { outline: 1px solid red; }
// Include a custom font
@font-face {
font-family: "Cabin Sketch";
src: url("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.woff") format("woff"),
url("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.ttf") format("truetype");
}
.slides h1, .slides h2, .slides h3 {
font-family: "Cabin Sketch";
}
Here's where you can access the CSS editor from inside of the Style panel:
A screenshot of the editor:
