8

I've been working with reveal.js a bit and you can change the background of individual slides with something referred to as the global state as seen here in the demo.

Are there other colors besides the ones mention (-soothe, -blackout and -alert) on this slide that can be applied (hit down key in the presentation to see the colors)? If so what colors?

1 Answer 1

11

You can do this to e.g. have a different background color for the final slide:

Declare a style for the background (given the class "the-end"):

  html.the-end .state-background {
    background-color: rgba(0,0,0, 0.8);
  }

Then have the final slide look like this:

<section data-state='the-end'>
  <h1>__END__</h1>
  <br>
  <h3>Thank you!</h3>
</section>

EDIT (added by tyler rinker) You are correct but I wanted to be more explicit for future searchers. I added the following two segments.

Added this to reveal.min.css

.orange .reveal .state-background{background:rgba(255,165,0,1)}

Added this to reveal.css

.orange .reveal .state-background {
    background: rgba( 255, 165, 0, 1 );
}
4
  • Where do I declare the style? Commented Mar 16, 2013 at 5:36
  • Answer my own question in an edit to your answer. Thanks for the response. +1 and the check. Commented Mar 16, 2013 at 14:55
  • FYI I've added a few more color options in the default styles: github.com/hakimel/reveal.js/blob/master/css/reveal.css#L1242
    – hakim
    Commented Apr 24, 2013 at 16:04
  • Personally, I wouldn't add any presentation specific things to the library, I'd probably just add the styles inline in the presentation itself to start with. Commented Jun 24, 2013 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.