Skip to content

Theme Editor: CSS

Custom styling gives you complete freedom to change the look and feel of presentations. It can be used to redesign the presentation controls, load a custom font, change slide transitions and much more.

Styles are written in LESS, meaning you have the option of using nesting, variables and other helpful features. All of your selectors will be automatically prefixed with .reveal when saved to avoid spillover.

The theme editor provides two different ways to add custom CSS:

1. Theme CSS
Adding styles to a theme means they will only be applied when that theme is used. This option is available in the header when you are editing a theme. Styles are previewed in real-time on the right so that you immediately know what you're getting.



2. Global CSS
Global styles are applied to ALL presentations in a team, regardless of what theme they are using. Look for this option in the header of the themes page.



Advanced: Slide Classes
Special syntax can be used to define slide classes in your theme CSS. These slide classes will be listed in the presentation editor interface so that users of the theme can easily apply them to a slide of their choosing. To define a slide class simply start a line with "//= " followed by your class name. For example, if you wanted to let users left-align content on some slides:
//= left-align
.slides section.left-align * {
  text-align: left;
}
Here's what is presented to the person using your theme:


Feedback and Knowledge Base