#!/usr/bin/env python
# coding: utf-8

# # Testing the overlay feature

# The overlay protocol goes like this

# ## Using `overlay` 

# If we find an `overlay` entry in your RISE config - this can be set in many different places, see [the customization doc](http://rise.readthedocs.io/en/latest/customize.html) -, then this string will be inserted in a `div#rise-overlay` element that shows on every slide.
# 
# So this is a very low-level entry point, you are entirely responsible for providing a complete html fragment, and for styling it - how you can inject styling here is another story entirely, that is too covered [in the customization doc as well](http://rise.readthedocs.io/en/latest/customize.html#adding-custom-css).

# ## Using `header`, `footer` and `backimage`

# If OTOH `overlay` cannot be found, then RISE looks for 
# * `header`
# * `footer`
# * and `backimage` (again in the `RISE` config)

# Then it creates an html element that looks like this
# 
# ```
# <div id='rise-overlay'> 
#   <div id='rise-header'> ...</div>
#   <div id='rise-backimage'><img src=... /></div>
#   <div id='rise-footer'> ...</div>
# </div>
# ```

# with minimum styling so that the header is at the top, the footer at the bottom, and the image takes the whole page.
# 
# So this protocol lets you define
# 
# * `header` and `footer` as a regular string, or a more elaborate html element
# *  and`backimage` as a url path
# 
# and in both cases you are still responsible for styling.
#   

# # Examples

# The present notebook demonstrates defining `overlay`, [this other one](header-footer.md) shows how to 
# use `header`, `footer` and `backimage`.