posts/customizing-your-ipython-slides.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Some days ago, I received this message on G+:\n",
      "\n",
      ">In a future release, would be handy to add custom classes to slides so that you can use CSS rules to choose certain layouts for image slides, text, multiple charts, etc. \n",
      "\n",
      "But... we already support this kind of customization! And it is clearly my fault that you don't know about this feature... so:\n",
      "<!-- TEASER_END -->\n",
      "\n",
      "1. I am very sorry for the lack of proper documentation (I am working on that ;-)).\n",
      "2. In the meantime, you can look at this blog where I am documenting some important things for this slideshow platform.\n",
      "3. You can also ask me whatever you want by twitter, G+, open issues at [Github](https://github.com/ipython/ipython) or make comments here, in my blog.\n",
      "\n",
      "Using this message as a trigger (and following with the serie of blog posts explaining some of the IPython slides features), I will explain you how to customize your IPython slides in just two steps:\n",
      "\n",
      "**NOTE**: I will use, as a starting point, the following slides of a talk I gave to journalist and designers at [Hacks/HackersBA](http://www.mediaparty.info), a story to write in another blog post..."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<iframe src=\"http://damianavila.github.io/hackperiodismo\" width=800 height=600></iframe>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "**Step 1**. Create a `custom.css` file containing your css rules."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!cat /media/datos/Desarrollos/hackperiodismo/custom.css"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "/*Some css fixes to use night theme with IPython slides*/\r\n",
        "body {\r\n",
        "background-color: #111111;\r\n",
        "}\r\n",
        ".reveal p {\r\n",
        "color: white;\r\n",
        "}\r\n",
        ".reveal ul, ol {\r\n",
        "color: white;\r\n",
        "}\r\n",
        "div.output_area pre {\r\n",
        "color: white;\r\n",
        "}\r\n",
        "div.output_stderr {\r\n",
        "background: #F00;\r\n",
        "}\r\n",
        ".reveal table th, .reveal table td {\r\n",
        "color: white;\r\n",
        "}\r\n",
        "\r\n"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "**Step 2**. Put this `custom.css` file in the same `dir` where your slides lives."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!ls /media/datos/Desarrollos/hackperiodismo"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "custom.css  figs  index2.html  index.html\r\n"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "**NOTE**: Here, I previously renamed my `notebook.slides.html` to `index.html` but it is not necessary for the customization.\n",
      "\n",
      "And you are done!\n",
      "\n",
      "*The slideshow will read the `custom.css` file at last and overwrite the css rules according to your desires.*\n",
      "\n",
      "Pretty easy! ;-)\n",
      "\n",
      "And now, the example slides rendered with a new darker style...\n",
      "\n",
      "**NOTE**: In this case I applied the NIGHT reveal theme (adding `?theme=night` to the url) and used the `custom.css` file to adjust some details ;-) (darker reveal themes need this kind of customization to be rendered OK)."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<iframe src=\"http://damianavila.github.io/hackperiodismo/index2.html?theme=night\" width=800 height=600></iframe>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You can change more fundamental things and make crazy stuff... just go ahead and let me know.\n",
      "\n",
      "Enjoy!\n",
      "\n",
      "Dami\u00e1n."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}