Operational Dynamics
Technology, Strategy, and IT Operations Consulting   |   Open Source Research and Development   |   Blogs

Projection:
Theming your presentation

CSS Hierarchy

When loading the slide content from (for instance) slides/AndrewWasWrong.html, the original:

2 <section class="shout">
3 
4 <h2>Andrew was wrong, again</h2>
5 
8 </section>
is modified at runtime to the following:
1 <div class="slide" id="AndrewWasWrong">
2 <section class="shout">
3 
4 <h2>Andrew was wrong, again</h2>
5 
6 <footer class="pagenumber">12</footer>
7 <div class="overlay"></div>
8 </section>
9 </div>
wrapping the side and adding a page number and some additional machinery to handle events in list (aka "slide sorter") mode. You don't really need to know this, except if you're working on the stylesheet for your own theme.

The class hierarchy you work in is  html body div.deck div.slide section. You can omit most of that in a CSS stylesheet; the following is sufficient:

56 .slide section {
57         padding-top: 50px;
58         padding-left: 80px;
59         padding-right: 80px;
60         padding-bottom: 0;
61         width: 864px;
62         height: 718px;
63         background: #ffffff;
64         color: #000000;
65         z-index: 1;
66 }
67 
which is in fact the declaration from engine/style.css that sets the baseline properties and dimensions for your <section> elements.

Last: Examples, Previous: Writing, Up: Overview.


These documents copyright © 2013 Operational Dynamics Consulting, Pty Ltd unless otherwise noted. Copyright of work by other authors is retained by those authors. Most material in this site is made available under an Open Source or Open Content licence; see the top level LICENCE file in that project's source repository for details

Files on this site (notably program code) will be delivered as Content-Type: text/plain unless syntax-highlighted or binary. All times UTC