Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

reveal.js background color choices

Tags:

html

reveal.js

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?

like image 697
Tyler Rinker Avatar asked Mar 03 '13 08:03

Tyler Rinker


1 Answers

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 );
}
like image 110
jplindstrom Avatar answered Sep 26 '22 12:09

jplindstrom