{
"metadata": {
"name": "",
"signature": "sha256:00b33d93b2202bf96955eb36dc6e663425769213dc607eebcdac797193d75988"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Adding style to the notebook"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Teaching Numerical Methods with IPython Notebooks, SciPy 2014 \n",
"\n",
"### Aron Ahmadia (US Army ERDC) and David Ketcheson (KAUST)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
" This lecture by Aron Ahmadia and David Ketcheson is licensed under a Creative Commons Attribution 4.0 International License. All code examples are also licensed under the [MIT license](http://opensource.org/licenses/MIT)."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can give your notebooks a distinctive flair, and perhaps make them more useful for your students, by modifying the way they look.\n",
"\n",
"The appearance of the IPython notebook is managed through **Cascading Style Sheets** (CSS), a widely-used web technology. It's possible to make huge modifications to the notebook with CSS; we will just cover the basics."
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"Applying a stylesheet"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can apply a particular style locally to all notebooks you run by adding a `custom.css` file to your ipython profile directory. This is fun, but not so useful for teaching, since it will only change the look of notebooks on your own machine. What's needed is a way to distribute styling information with the notebook itself, so that anyone viewing it sees it the way you intended."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"We can apply a CSS style to the notebook dynamically like this:"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.core.display import HTML\n",
"css_file = './example.css'\n",
"HTML(open(css_file, \"r\").read())"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n"
],
"metadata": {},
"output_type": "pyout",
"prompt_number": 3,
"text": [
""
]
}
],
"prompt_number": 3
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This is slightly intrusive -- ideally, the styling would be applied without the user needing to know or do anything about it. [Such a solution is in the works](https://github.com/ipython/ipython/issues/5921), but for now the code above is the best approach available. It simply injects the contents of `css_file` in the header of the notebook's HTML file. Any file can be used just by replacing the path stored in `css_file`."
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"Using CSS with the Notebook"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Let's take a look at the contents of that CSS file, using IPython's `%cat` magic function:"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%cat 'example.css'"
],
"language": "python",
"metadata": {},
"outputs": []
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"We can use `%load` and `%%html` to load the file into a cell and actually apply it:"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%load 'example.css'"
],
"language": "python",
"metadata": {},
"outputs": []
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"There's a lot there (notice that the notebook created a scrollable section because the output was so long). Let's walk through this custom stylesheet one piece at a time.\n",
"\n",
"---\n",
"\n",
"The first section is actually pure HTML, not CSS:\n",
"\n",
"```html\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"```\n",
"\n",
"This loads a bunch of [Google fonts]() that we are going to use. If you use fonts that are usually installed on most OS's, you don't need a section like this."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"---\n",
"\n",
"```css\n",
"\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## More resources\n",
"\n",
"If you've never used CSS, there are a number of good tutorials available on the web. Once you understand a bit of CSS, all you need to know are the names that IPython uses for the different sections of the notebook. Unfortunately, these are not well documented at the moment. The best place to start with styling your own notebooks are the many examples out there:\n",
"\n",
"- [HyperPython styling]() ([sample notebook]())\n",
"- [AeroPython styling]() ([sample notebook]())\n",
"- [Louic Vermeer's custom CSS](http://blog.louic.nl/?p=683)\n",
"- [48 themes for your IPython notebook](http://www.damian.oquanta.info/posts/48-themes-for-your-ipython-notebook.html) from Damian Avila\n",
"- [Somebody's custom.css from Github](https://github.com/panditarevolution/ipythonNotebook_customs/blob/master/monokai/custom.css)"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}
![\"Creative](\"https://i.creativecommons.org/l/by/4.0/80x15.png\")