Restyle team presentations with CSS

Custom CSS gives you complete freedom to change the look and feel of your team's presentations. Use it to redesign the presentation controls, load a custom font, change slide transitions, and much more.

Styles can use LESS features such as nesting and variables. When saved, selectors are automatically scoped within .reveal so they don't affect the surrounding page.

The theme editor offers two places to add custom CSS.

Theme CSS

Styles added to a theme only apply to presentations that use that theme. Open the CSS option in the header while editing a theme. Your styles are previewed in real time on the right, so you can see the result immediately.

Global CSS

Global styles apply to every presentation in your team, regardless of its theme. Open this option from the header of the themes page.

Slide classes (advanced)

Theme CSS can define slide classes: named styles that appear in the presentation editor so people using the theme can apply them to any slide. To define one, start a line with //= followed by the class name. For example, this class lets people left-align content on selected slides:

//= left-align
.slides section.left-align * {
  text-align: left;
}

Here's what people using your theme will see: