Skip to content

Styling

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

DOM hierarchy

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

html
 | - body
      | - div#slideshow                    # Slideshow container
               | - div.slide               # First slide container
               |      | - 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.

Styling slides

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 can create a CSS class and then 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.

Styling slide content

While the [[name|Slide-Properties#wiki-name]] and [[class|Slide-Properties#wiki-class]] slide properties identify and apply CSS classes to entire slides, there's also content classes for styling specific content of a slide:

# Slide title

.red[Words] .yellow[in] .green[different] .blue[colors].

This will substitute the content of the square brackets with a <span> tag with the CSS class name(es) specified applied to it:

# Slide title

<span class="red">Words</span> <span class="yellow">in</span> <span class="green">different</span> <span class="blue">colors</span.>

If the content of the square brackets contain a newline character, a <div> tag will be used instead of a <span> tag.

<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