{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Testing the overlay feature"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "source": [
    "The overlay protocol goes like this"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Using `overlay` "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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.\n",
    "\n",
    "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)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Using `header`, `footer` and `backimage`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If OTOH `overlay` cannot be found, then RISE looks for \n",
    "* `header`\n",
    "* `footer`\n",
    "* and `backimage` (again in the `RISE` config)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Then it creates an html element that looks like this\n",
    "\n",
    "```\n",
    "<div id='rise-overlay'> \n",
    "  <div id='rise-header'> ...</div>\n",
    "  <div id='rise-backimage'><img src=... /></div>\n",
    "  <div id='rise-footer'> ...</div>\n",
    "</div>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "source": [
    "with minimum styling so that the header is at the top, the footer at the bottom, and the image takes the whole page.\n",
    "\n",
    "So this protocol lets you define\n",
    "\n",
    "* `header` and `footer` as a regular string, or a more elaborate html element\n",
    "*  and`backimage` as a url path\n",
    "\n",
    "and in both cases you are still responsible for styling.\n",
    "  "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The present notebook demonstrates defining `overlay`, [this other one](header-footer.md) shows how to \n",
    "use `header`, `footer` and `backimage`."
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "jupytext": {
   "formats": "ipynb"
  },
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.4"
  },
  "rise": {
   "autolaunch": true,
   "overlay": "<div class='myheader'><h2>my company</h2></div><div class='myfooter'><h2>the date</h2></div>"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}