{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> This is one of the 100 recipes of the [IPython Cookbook](http://ipython-books.github.io/), the definitive guide to high-performance scientific computing and data science in Python.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 3.4. Customizing the CSS style in the notebook (IPython 4)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You will need the *CSS* dataset on the book's website. (http://ipython-books.github.com)\n",
    "\n",
    "You are expected to know a bit of CSS3 for this recipe. You can find many tutorials online (see references at the end of this recipe).\n",
    "\n",
    "This recipe is significantly different for IPython 4.x and IPython 3.x (and below). IPython configuration files are organized in grops called *profiles*, which can be easilly chosen on IPython startup. In the case of IPython 3, a profile contains configuration for both IPython kernel and the front-ends (including the HTML notebook). With IPython 4, the language independent front-ends are separated into a new project, Jupyter, which has its own configuration directory, (`~/.jupyter` by default). IPython 4 still supports profiles, but they contain only kernel-related configuration. Jupyter does not have a notion of profiles.\n",
    "\n",
    "In this recipe, we are modifying the Notebook look, but we want to do it in a way that it does not mess up the default look. With IPython 3, it can be easilly done by using a dedicated profile. With Jupyter, it can still be done, but in a more convoluted way. This version of the recipe shows how to do it with IPython 4 and Jupyter."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1\\. First, we retrieve in Python the path to the default Jupyter configuration directory (this should be `~/.jupyter`)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "confdir = !jupyter --config-dir\n",
    "confdir = confdir[0]\n",
    "confdir"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "2\\. Now, we create a new Jupyter configuration directory, called `css_profile`, inside the default one, to avoid messing with our regular Jupyter configuration. We also create a subdirectory `custom` to hold our HTML customizations. The CSS file will be called `custom.css`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import os\n",
    "cssprofdir = os.path.realpath(os.path.join(\n",
    "            confdir, 'css_profile'))\n",
    "cssdir = os.path.join(cssprofdir, 'custom')\n",
    "csspath = os.path.join(cssdir, 'custom.css')\n",
    "os.makedirs(cssdir)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "csspath"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "3\\. We can now edit this file here. We change the background color, the font size of code cells, the border of some cells, and we highlight the selected cells in edit mode."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%writefile {csspath}\n",
    "\n",
    "body {\n",
    "    /* Background color for the whole notebook. */\n",
    "    background-color: #f0f0f0;\n",
    "}\n",
    "\n",
    "/* Level 1 headers. */\n",
    "h1 {\n",
    "    text-align: right;\n",
    "    color: red;\n",
    "}\n",
    "\n",
    "/* Code cells. */\n",
    "div.input_area > div.highlight > pre {\n",
    "    font-size: 10px;\n",
    "}\n",
    "\n",
    "/* Output images. */\n",
    "div.output_area img {\n",
    "    border: 3px #ababab solid;\n",
    "    border-radius: 8px;\n",
    "}\n",
    "\n",
    "/* Selected cells. */\n",
    "div.cell.selected {\n",
    "    border: 3px #ababab solid;\n",
    "    background-color: #ddd;\n",
    "}\n",
    "\n",
    "/* Code cells in edit mode. */\n",
    "div.cell.edit_mode {\n",
    "    border: 3px red solid;\n",
    "    background-color: #faa;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "4\\. Now we can open a notebook with the `css_profile` configuration. The output of the following  cell shows the command(s) to execute from the shell, depending on your operating system type:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from sys import platform\n",
    "if platform == 'win32':\n",
    "    print('set JUPYTER_CONFIG_DIR=\"{0}\"'.format(cssprofdir))\n",
    "    print('jupyter notebook')\n",
    "else:\n",
    "    print('JUPYTER_CONFIG_DIR=\"{0}\" jupyter notebook'.format(cssprofdir))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "5\\. We can also use this stylesheet with nbconvert. We just have to convert a notebook to a static HTML document, and copy the `custom.css` file in the same folder. Here, we use a test notebook that has been downloaded on this book's website (see *Getting started*)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "!cp {csspath} custom.css\n",
    "!jupyter nbconvert --to html data/test.ipynb"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is how this HTML document look like:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.display import IFrame\n",
    "IFrame('test.html', 600, 650)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> You'll find all the explanations, figures, references, and much more in the book (to be released later this summer).\n",
    "\n",
    "> [IPython Cookbook](http://ipython-books.github.io/), by [Cyrille Rossant](http://cyrille.rossant.net), Packt Publishing, 2014 (500 pages)."
   ]
  }
 ],
 "metadata": {
  "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}