Skip to content

Styling

Jump to bottom Edit New page
gnab edited this page Mar 8, 2013 · 14 revisions

Work in progress.

DOM hierarchy

Below is a visualization of the DOM hierachy of a slideshow:

html
 | - body
      | - div#slideshow                    # Slideshow container
               | - div.slide               # First slide
               |      | - div.content      # First slide content
               | - div.slide               # Second slide
               ...

Every slide is represented by a separate div.slide that is visible when it's the current slide and hidden when not. The div.slide has display: table, and contains a div.content with display: table-cell that holds the actual slide content.

The default styles are defined using LESS in remark.less.

Applying styles

You can use regular CSS to style slides. It's primarily the div.content element that should be styled, as its ancestors are more or less the slideshow framework itself, visually speaking.

To target a specific slide's div.content element, you can use the [[name|Slide-Properties#wiki-name]] slide property to give it a name that can be used to identify it:

name: agenda

# Agenda

This will set the div.content's id to slide-agenda, so that is becomes div#slide-agenda.content.

To target one or more div.content elements, you create a CSS class and then use use the [[class|Slide-Properties#wiki-class]] slide property to assign the class to a slide:

class: middle, center

# Slide title

This will add the middle and center classes to the div.content, so that it becomes div.content.middle.center.

<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally