Reveal.js: How to declare slide background color via class (versus data-state declarations)?

[reagle]

Stupid question, but I know I can change a slides background via the data-state declaration. But is there a way to do this other than making such a declaration on the first section of every vertical column? How would I change the background-color of all slides with class="slide level1"? (Or maybe I would need a fancy selector, i.e., first section child of a section?)

[hakimel]

You should be using the new slide data-background system, as opposed to data-state. There's more info about this here https://github.com/hakimel/reveal.js#slide-backgrounds. Those backgrounds get inherited to the vertical children of a horizontal parent slide.

[reagle]

Thank you Hakim, that's good to know. But I don't want the vertical
columns to have the same background, but the top section of each
vertical column so that when I transition to a new "section" it's more
apparent.

On 11/05/2013 07:59 AM, Hakim El Hattab wrote:

You should be using the new slide data-background system, as
opposed to data-state. There's more info about this here
https://github.com/hakimel/reveal.js#slide-backgrounds. Those
backgrounds get inherited to the vertical children of a horizontal
parent slide.

[reagle]

Just to reiterate, I don't want the vertical columns to have the same background, but the top section of each vertical column so that when I transition to a new "section" it's more apparent.

[hakimel]

Sure, you can do that by defining a data-background for the top slide in each vertical stack.

[reagle]

So there is no way to set background via CSS and a class selector?

[reagle]

I was wondering how to do this again (forgetting I posted an issue), searched and found this! So I assume the answer is no. But it would be a useful feature.

[sybrenstuvel]

data-background isn't a replacement for data-state. The latter can be used to set gradient backgrounds using CSS, for example to replace the Sky theme's blue gradient with a green gradient for certain slides.

To use data-state="someclass" for CSS background selection, use CSS like this:

html.someclass body {
    background: -moz-radial-gradient(center, circle cover, #f2fcf7 0%, #a1e3bf 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f2fcf7), color-stop(100%, #a1e3bf));
    background: -webkit-radial-gradient(center, circle cover, #f2fcf7 0%, #a1e3bf 100%);
    background: -o-radial-gradient(center, circle cover, #f2fcf7 0%, #a1e3bf 100%);
    background: -ms-radial-gradient(center, circle cover, #f2fcf7 0%, #a1e3bf 100%);
    background: radial-gradient(center, circle cover, #f2fcf7 0%, #a1e3bf 100%);
}