Associate a slide to a class

In IOSlides, a class defined in a level 2 header is associated to the article tag by default. For instance, a background colour definition is such a class will not cover the complete slide. To redirect the class to the slide tag it is possible to use the slide-class attribute or define a classname starting with slide- (which will act as a shortcut to the slide-class attribute).

slide-class attribute

For example, define a my_class css rule:

.my-class {
  background-color: red;
}

To associate my-class to the slide:

## Slide header {slide-class="my-class"}

.slide-* class shortcut

Alternatively, if you define a class starting with .slide- and associate it to a level 2 header, the class will be applied to the slide tag.

.slide-my-class {
  background-color: red;
}

## Slide header {.slide-my-class}

In addition, the box themes definitions already contain a class defining the background of a slide (.slide-intro, .slide-practical …):

## Slide header {.slide-intro}

Define a background image or use a hexadecimal colour code

The slide can be customised to use a background colour or image. This possibility was introduced in IOSlides with rmarkdown >= 1.7.

To use a background image, define the data-background attribute with the path to the image (url or relative path).

## Slide header {data-background="my_image.jpeg"}

You can also use a hexadecimal colour code:

## Slide header {data-background="#FF0000"}