Example Notebook with Custom.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Example IPython Notebook with Customize Theme"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Example IPython notebook with snippet of code (at the end) on how to include customize `css` file to the notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"400\"\n",
       "            height=\"300\"\n",
       "            src=\"https://www.youtube.com/embed/ldk2pLyVZ4c\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.YouTubeVideo at 0x10633dc10>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import YouTubeVideo\n",
    "YouTubeVideo(\"ldk2pLyVZ4c\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<img src=\"http://www.phdcomics.com/comics/archive/phd072508s.gif\"/>"
      ],
      "text/plain": [
       "<IPython.core.display.Image object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import Image\n",
    "Image(url='http://www.phdcomics.com/comics/archive/phd072508s.gif')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Below is the section that we download our customize notebook to IPython notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       "\n",
       "\n",
       "@import url('http://fonts.googleapis.com/css?family=Crimson+Text');\n",
       "@import url('http://fonts.googleapis.com/css?family=Kameron');\n",
       "@import url('http://fonts.googleapis.com/css?family=Lato:200');\n",
       "@import url('http://fonts.googleapis.com/css?family=Lato:300');\n",
       "@import url('http://fonts.googleapis.com/css?family=Lato:400');\n",
       "\n",
       "\n",
       "/* Change code font */\n",
       ".CodeMirror pre {\n",
       "    font-family: Monaco;\n",
       "    font-size: 9pt;\n",
       "}\n",
       "\n",
       "div.output pre{\n",
       "    font-family: Monaco;\n",
       "    font-size: 9pt;\n",
       "}\n",
       "\n",
       "div.output_html td{\n",
       "    font-family: Monaco;\n",
       "    font-size: 8pt;\n",
       "}\n",
       "\n",
       "div.prompt{\n",
       "    font-family: Monaco;\n",
       "    font-size: 8pt;\n",
       "}\n",
       "\n",
       "div.completions select{\n",
       "    font-family: Monaco;\n",
       "    font-size: 9pt;\n",
       "}\n",
       "\n",
       "div.container pre{\n",
       "    font-family: Monaco;\n",
       "    font-size: 9pt;\n",
       "}\n",
       "\n",
       "div.tooltiptext pre{\n",
       "    font-family: Monaco;\n",
       "    font-size: 8pt;\n",
       "}\n",
       "\n",
       "div.input_area {\n",
       "    border-color: rgba(0,0,0,0.10);\n",
       "    background: rbga(0,0,0,0.5);\n",
       "}\n",
       "\n",
       "div.text_cell {\n",
       "    max-width: 105ex; /* instead of 100%, */\n",
       "}\n",
       "\n",
       "div.text_cell_render {\n",
       "    font-family: lato, \"Crimson Text\";\n",
       "    font-size: 11pt;\n",
       "    line-height: 145%; /* added for some line spacing of text. */\n",
       "}\n",
       "\n",
       "div.text_cell_render h1,\n",
       "div.text_cell_render h2,\n",
       "div.text_cell_render h3,\n",
       "div.text_cell_render h4,\n",
       "div.text_cell_render h5,\n",
       "div.text_cell_render h6 {\n",
       "    font-family: lato, 'HelveticaNeue-Light';\n",
       "    font-weight: 300;\n",
       "}\n",
       "\n",
       "div.text_cell_render h1 {\n",
       "    font-size: 24pt;\n",
       "}\n",
       "\n",
       "div.text_cell_render h2 {\n",
       "    font-size: 18pt;\n",
       "}\n",
       "\n",
       "div.text_cell_render h3 {\n",
       "    font-size: 14pt;\n",
       "}\n",
       "\n",
       ".rendered_html pre,\n",
       ".rendered_html code {\n",
       "    font-size: medium;\n",
       "}\n",
       "\n",
       ".rendered_html ol {\n",
       "    list-style:decimal;\n",
       "    margin: 1em 2em;\n",
       "}\n",
       "\n",
       ".prompt.input_prompt {\n",
       "    color: rgba(0,0,0,0.5);\n",
       "}\n",
       "\n",
       ".cell.command_mode.selected {\n",
       "    border-color: rgba(0,0,0,0.1);\n",
       "}\n",
       "\n",
       ".cell.edit_mode.selected {\n",
       "    border-color: rgba(0,0,0,0.15);\n",
       "    box-shadow: 0px 0px 5px #f0f0f0;\n",
       "    -webkit-box-shadow: 0px 0px 5px #f0f0f0;\n",
       "}\n",
       "\n",
       "div.output_scroll {\n",
       "    -webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);\n",
       "    box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);\n",
       "    border-radious: 2px;\n",
       "}\n",
       "\n",
       "#menubar .navbar-inner {\n",
       "    background: #fff;\n",
       "    -webkit-box-shadow: none;\n",
       "    box-shadow: none;\n",
       "    border-radius: 0;\n",
       "    border: none;\n",
       "    font-family: lato;\n",
       "    font-weight: 400;\n",
       "}\n",
       "\n",
       ".navbar-fixed-top .navbar-inner,\n",
       ".navbar-static-top .navbar-inner {\n",
       "    box-shadow: none;\n",
       "    -webkit-box-shadow: none;\n",
       "    border: none;\n",
       "}\n",
       "\n",
       "div#notebook_panel {\n",
       "    box-shadow: none;\n",
       "    -webkit-box-shadow: none;\n",
       "    border-top: none;\n",
       "}\n",
       "\n",
       "div#notebook {\n",
       "    border-top: 1px solid rgba(0,0,0,0.15);\n",
       "}\n",
       "\n",
       "#menubar .navbar .navbar-inner,\n",
       ".toolbar-inner {\n",
       "    padding-left: 0;\n",
       "    padding-right: 0;\n",
       "}\n",
       "\n",
       "#checkpoint_status,\n",
       "#autosave_status {\n",
       "    color: rgba(0,0,0,0.5);\n",
       "}\n",
       "\n",
       "#header {\n",
       "    font-family: lato;\n",
       "}\n",
       "\n",
       "#notebook_name {\n",
       "    font-weight: 200;\n",
       "}\n",
       "\n",
       "\n",
       "</style>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.core.display import HTML\n",
    "HTML(open(\"./custom_nb.css\", \"r\").read())"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}