Custom CSS (Pro)

The CSS editor lets you freely author custom styles for your presentation. It's available as an option inside of the Style panel of the editor.

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.

Below are some sample selectors:
// Change presentation background
& {
    background: #a83239;
}

// Change body text color
.slides {
    color: #009999;
}

// Change link color
.slides a {
    color: red;
}

// Turn text white if the slide has a dark background
.has-dark-background {
    color: #fff;
}

// 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";
} // Change color of controls and progress bar @interactiveColor: rgb(200,105,119); .progress span { background: @interactiveColor !important; } .controls .navigate-left { border-right-color: @interactiveColor !important; } .controls .navigate-right { border-left-color: @interactiveColor !important; } .controls .navigate-up { border-bottom-color: @interactiveColor !important; } .controls .navigate-down { border-top-color: @interactiveColor !important; }

Here's where you can access the CSS editor from inside of the Style panel:


A screenshot of the editor:




Feedback and Knowledge Base