How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook?

orome picture orome · Aug 22, 2015 · Viewed 47.6k times · Source

I would like to apply a few simple changes to the appearance of my IPython/IHaskell/Jupyter Notebooks, such as:

    rendered_html :link {
        text-decoration: none;
    }

However, I can't figure out how to do this. I've tried many of the solutions I've found by searching, e.g., placing CSS in:

~/.ipython/profile_default/static/css/custom.css

but none have any effect, and I suspect that, given the recent changes to the Notebook architecture, the method for accomplishing this has changed and that the instructions I'm finding are out of date.

How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook?


OS X 10.10.4; Xcode 6.4; CLT: 6.4.0.0.1; Clang: 6.1; Python Python 2.7.10 (Homebrew); IHaskell 0.6.4.1, IPython 3.0.0 (answers for 4.0.0 and Jupiter 4.0 also appreciated, as I will upgrade soon).

Answer

kynan picture kynan · Nov 6, 2015

To add custom CSS to a particular notebook you can use HTML. Add and execute a regular Python code cell with the following content:

from IPython.core.display import HTML
HTML("""
<style>
// add your CSS styling here
</style>
""")

Alternatively (thanks @abalter) use the %%html cell magic:

%%html
<style>
// add your CSS styling here
</style>