5

I try to change the color of the font in just one section because I added a background picture and you cant read the white otherwise:

            <section data-background="media/imagename.jpg">             
                <h2>blablabla</h2>
            </section>

What should I add here to make "blablabla" look black?

Thanks!

Lala

0

3 Answers 3

5

It's more simple than you can think :

Inline Editing

<section data-background="media/imagename.jpg" *style="color:black"*>             
                <h2>blablabla</h2>
            </section>

or, 2nd option with a .css file

<section id="namediv" data-background="media/imagename.jpg">             
                <h2>blablabla</h2>
            </section>

.css:

#namediv
{
  color:black
}

remember to include the .css file in your html/page. The first one is more fast but very rough to see and to use, the second one is more structured. Remember that you have to adjust the font color based on your background image (blue background white color font etc.etc.)

2
  • be careful that what you wrote is Html, pure simply Html, you will use reveal.js when in js script you will change dynamically your content.
    – Fedeco
    Commented Nov 15, 2016 at 16:39
  • 2
    The first one does not work within reveal.js, because the CSS theme overrides this with a more specific value (i.e. the color for the h2 element is set within the theme css, black.css in my case)
    – Valentin
    Commented Mar 8, 2021 at 5:36
4

Additionally, here is an example on how to change font colour when you use markdown for slides

<section data-markdown>
  <script type="text/template">
  <!-- .slide: style="color:white" -->  
    your text in markdown goes here...   

    _Doing is the best form of Saying_  
  </script>
</section>
0

The simplest way to do do this is with an inline style attribute, but you need to set it directly on the h2 element to override the theme, i.e. like this:

<section data-background="media/imagename.jpg" >             
   <h2 style="color:black">blablabla</h2>
</section>

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.