Reveal.js: Master slide with headers and footers

Created on 12 Oct 2012  路  5Comments  路  Source: hakimel/reveal.js

Currently working on my 2nd presentation with Reveal and I like it. Thanks for sharing.

How cool would it to have a master slide with the things that repeat everywhere like a logo, menu, current date, slide x of y, ...

picture sundorf

Most helpful comment

This works for me for element inside .slides:

.slides .header{
  position:absolute;
  top: -50%;
  left: -50%;
}
.slides .footer{
  position:absolute;
  bottom: 50%;
  left: -50%;
}
picture yudieg on 27 Apr 2014
👍3

All 5 comments

Glad you like it! If you want some persistent elements you can place them directly in the `

`` container. That's where I keep the controls and progress bar etc.

hakimel picture hakimel on 13 Oct 2012

That's working for the presentation, but not for pdf output.
Would be nice to have persistent header and footers in the pdf handout as well.

ds82 picture ds82 on 14 May 2013

I'm struggling on this issue right now. It seems pdf version can only be printed via Chrome, but Chrome is the only browser that does not support repetting one element on every page. I'd be glad to see a solution to this.

thibault picture thibault on 21 Jun 2013

Maybe hakimel you could share with us what you have done to add a footer.

I have added it after the

like that 

      <div class="footer">
           <p>Copyright 漏2014 MyCompany, Inc.</p>
         </div>

with this class

.footer {
  position: absolute; 
  left: 35%;
  bottom: 1em;
}

but the result is not excellent as the picture is not really centered

cmoulliard picture cmoulliard on 14 Feb 2014
👍2

This works for me for element inside .slides:

.slides .header{
  position:absolute;
  top: -50%;
  left: -50%;
}
.slides .footer{
  position:absolute;
  bottom: 50%;
  left: -50%;
}
yudieg picture yudieg on 27 Apr 2014
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

bamos picture bamos  路  3Comments
Enosinger picture Enosinger  路  4Comments
lichtner picture lichtner  路  4Comments
patarapolw picture patarapolw  路  5Comments
Seth-Gecko picture Seth-Gecko  路  4Comments