Project on github

Presentation styling

Styling pure HTML presentations

If your creating an HTML presentation, chances are that you already know how to style in CSS. Here are some resources to help you out:

impress.js

reveal.js

Styling HTML presentations that were converted from PDF

When you convert a presentation with ASQ, all the converted slides have very strict CSS rules that match the rendering of the original PDF. It’s better if you do not change these rules, unless you know what you’re doing. That said, it’s still very easy to style new content that you add, either in existing slides (where you should be careful where you position it) or in new slides.

Converted presentations come with some default styling which you can find under :

Feel free to modify these files to match the look and feel you desire.

Slide transitions

impress.js

With impress.js there are 3 different transitions you can configure:

  1. Transtion from one slide to the next: The default is 1000 milliseconds. To change this value, go to the <div id="impress"> and add a data-transition-duration attribute with the value expressed in milliseconds:

    1
    2
    <!-- Now slide transistions will take 200 milliseconds -->
    <div id="impress" data-transition-duration="200">

  2. Transition of active slide: When we advance to a slide, it’s sometimes nice to show it gradually, for example by modifying it’s opacity. Every impress.js slide has the class .step. When they get active they also get the .active class. When they haven’t been shown yet they have the .future class and when they have been shown and are not active anymore the .past class. In frameworkData/impress.css you can see in line 289:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .impress-enabled .step {
        margin: 0;
        opacity: 0.3;

        -webkit-transition: opacity 300ms;
        -moz-transition:    opacity 300ms;
        -ms-transition:     opacity 300ms;
        -o-transition:      opacity 300ms;
        transition:         opacity 300ms;
    }

    .impress-enabled .step.active { opacity: 1 }

Which means that when a .step get .active the opacity will transition from 0.3 to 1 in 300 milliseconds. Fell free to modify this according to your needs.

  1. Fragment(substep) transition: Simililar to the .step slides, fragments in impress.js have the .substep class. Substeps that have already appeared have the .previous class. In frameworkData/impress.css you can see in line 312:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .substep {
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition:    opacity 0.5s;
        -ms-transition:     opacity 0.5s;
        -o-transition:      opacity 0.5s;
        transition:         opacity 0.5s;
    }

    .substep.active {
        opacity: 1;
    }

    /* change this to make previous substeps dimmer */
    .substep.previous {
        opacity: 1;
    }

Again, modify the above to match your styling needs.

reveal.js

TBD

Styling content that was added to existing slides.

Let’s see the typical output for a slide of a presentation converted from PDF

1
<div id="pf1" class="pf w0 h0 step slide flash" data-page-no="1" data-x="0" data-y="0"><div class="pc pc1 w0 h0"><img class="bi x0 y0 w0 h0" alt="" src="img/bg1.png"><div class="c x1 y1 w1 h1"><div class="t m0 x2 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0">!&quot;#$%&amp;&apos;()*$<span class="_ _0"></span>+%#%,<span class="_ _1"></span>-<span class="_ _0"></span>+<span class="_ _0"></span>%&quot;.</div></div><div class="t m0 x3 h3 y3 ff1 fs1 fc1 sc0 ls1 ws1">/0<span class="_ _1"></span>12345)!&amp;-66)/&apos;66%&quot;.)<span class="_ _2"></span>7</div></div></div>

Yeap! It doesn’t look that easy. And the absolute position of the elements inside doesn’t make it easier. Let’s format this a bit:

1
2
3
4
5
6
7
8
<div id="pf1" class="pf w0 h0 step slide flash" data-page-no="1" data-x="0" data-y="0">

<!--All the slides contents are under this line. Add your content between this
line and the slide contents -->

<div class="pc pc1 w0 h0"><img class="bi x0 y0 w0 h0" alt="" src="img/bg1.png"><div class="c x1 y1 w1 h1"><div class="t m0 x2 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0">!&quot;#$%&amp;&apos;()*$<span class="_ _0"></span>+%#%,<span class="_ _1"></span>-<span class="_ _0"></span>+<span class="_ _0"></span>%&quot;.</div></div><div class="t m0 x3 h3 y3 ff1 fs1 fc1 sc0 ls1 ws1">/0<span class="_ _1"></span>12345)!&amp;-66)/&apos;66%&quot;.)<span class="_ _2"></span>7</div></div>

</div>

Ok now we can clearly see the slide (which has a class attribute of slide) and the contents. It’s advisable to add new material before the contents of the slide, like so:

1
2
3
4
5
6
7
8
9
10
11
<div id="pf1" class="pf w0 h0 step slide flash" data-page-no="1" data-x="0" data-y="0">
<!--All the slides contents are under this line. Add your content between this
line and the slide contents -->

<div id="pf1-custom-content">
    <h1>This is new content</h1>
</div>

<div class="pc pc1 w0 h0"><img class="bi x0 y0 w0 h0" alt="" src="img/bg1.png"><div class="c x1 y1 w1 h1"><div class="t m0 x2 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0">!&quot;#$%&amp;&apos;()*$<span class="_ _0"></span>+%#%,<span class="_ _1"></span>-<span class="_ _0"></span>+<span class="_ _0"></span>%&quot;.</div></div><div class="t m0 x3 h3 y3 ff1 fs1 fc1 sc0 ls1 ws1">/0<span class="_ _1"></span>12345)!&amp;-66)/&apos;66%&quot;.)<span class="_ _2"></span>7</div></div>

</div>

And then you can go in your .css file file and style it. Just because you added it at the top, it doesn’t mean that it cannot appear under the existing content. Most of the times you will have need to do at least two things

  1. make the slide a bit bigger. For example in your .css file:

    1
    2
    3
    #pf1{
        height: 800px;
    }

  2. give the new content absolute positioning. Again, in your .css file:

    1
    2
    3
    4
    5
    #pf1-custom-content{
        position: absolute;
        top: 550px;
        left: 20px
    }

It’s important to state that for presentations that are pure HTML from the start (no PDF conversion), the content is much simpler without all these crazy classes; the styling is simpler as well.

Styling based on the role

Sometimes you need different styles for viewers than for presenters. to achieve this when the presentation is served from ASQ, the data-asq-role attribute is set on the <body> element with the corresponding role. For example, the presenter’s view will have <body data-asq-role="presenter"></body>

So to style based on role, you would do something like:

1
2
3
body[data-asq-role="presenter"] #my-slide{
    background: blue;
}