Search code examples
cssreveal.js

reveal.js font-size for li elements


I have the following code in a reveal.js site:

<head>
    <style type="text/css">
    ol li {
            font-size: 5px;
    }
    </style>
</head>
<body>
<div class="reveal">
    <div class="slides">
        <section>
            <h3>foo</h3>
            <ol>
                <li value=2>
                    bar
                </li>
                <li value=4>
                    baz
                </li>
            </ol>
        </section>
    </div>
</div>

I want to change the size of the numbers in the ordered list but the css style I added does not accomplish that. Are there reveal.js specific classes i have to overwrite?


Solution

  • Just modify the css file of the theme you're using.

    The theme file is located in the folder /css/theme/[yourtheme].css

    If you open that file you will see a section for the different fonts (the one below is for a header). You would want to look for the css responsible for the particular element of the theme you are interested in changing.

    .reveal h1,
    .reveal h2,
    .reveal h3,
    .reveal h4,
    .reveal h5,
    .reveal h6 {
    margin: 0 0 20px 0;
    color: #eee8d5;
    font-family: "League Gothic", Impact, sans-serif;
    line-height: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: none; }
    

    Here you can modify the different attributes, including font, of your text.

    Hope this helps ! If you have any other questions please ask!