Styling Slides

Styling

• Slides are contained in <article> elements
• Each slide has an HTML id that corresponds to the permalink ID generated by Sphinx (for example, you’re currentling reading styling).
• The heading level is added as a class; ie, level-2
• Slides may be styled using a theme, or custom CSS.
• You can enable slide numbers or a slide footer with configuration settings.

Included Themes

Hieroglyph includes three themes.

slides

Two slides levels: the first level of headers become “section” headers, and the second become the real content.

single-level

Based on the default slides theme. Only one style of slide, every slide has a title at the top.

slides2

Based on the updated (2012+) Google I/O HTML slides template. This theme is new in 0.7.

Setting the Theme

You can set your theme using the slide_theme configuration setting.

slide_theme = 'single-level'

If you’re using a custom theme, you can also set the directory to look in for themes:

slide_theme_path = '...'

Incremental slides (builds)

It’s common to have a slide with a list of items that are shown one at a time. Hieroglpyh supports this through the use of the build class. Let’s add a third slide to index.rst that incrementally displays a bulleted list.

Show Bullets Incrementally
==========================

.. rst-class:: build

- Adding the ``build`` class to a container
- To incrementally show its contents
- Remember that *Sphinx* maps the basic ``class`` directive to
  ``rst-class``

Here the rst-class directive causes the next element to be built incrementally.

Setting a Class on Slides

You can set the CSS class on a slide using the normal rst-class directive. (Sphinx remaps class to rst-class to avoid conflicts.) For example:

.. rst-class:: myclass

Slide Heading
-------------

The rst-class directive applies to the next following element (the heading Slide Heading in this example).

You can also set a default class on slides using the slide_classes option of the slideconf directive. Note that specifying an explicit class will override the slide_classes.

Custom CSS

The standard Hieroglyph themes support adding a custom stylesheet with the slide_theme_options dict in conf.py:

slide_theme_options = {'custom_css': 'custom.css'}

The custom CSS file should be located in the html_static_path (_static by default).

Adding Javascript

In addition to a custom CSS file, it is sometimes useful to include some custom Javascript for your slides. You can put this in your static directory (_static by default), and then reference it in the slide_theme_options dict in conf.py:

slide_theme_options = {'custom_js': 'myslides.js'}