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 can use LESS features such as nesting and variables. Selectors are automatically scoped within .reveal when saved to prevent them from affecting the surrounding page.
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.
Slide classes (advanced)
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:
