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

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).

Solution 1:

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>

Solution 2:

Starting Jupyter / IPython 4.1, the custom folder location has changed to ~/.jupyter/custom/. So place your custom.css and custom.js like this:

~/.jupyter/custom/custom.css
~/.jupyter/custom/custom.js

Works for me that way. Credits goes to Liang2

Edit:

If you are missing ~/.jupyter folder, you can use jupyter notebook --generate-config command to generate the folder.

Solution 3:

I think the path to your custom.css should be:

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

custom folder instead of css folder.

Solution 4:

Here is what I did.

From https://jupyter.readthedocs.io/en/latest/use/jupyter-directories.html#envvar-JUPYTER_CONFIG_DIR I found out that you can change the config directory by setting the JUPYTER_CONFIG_DIR env var, then I run jupyter like:

JUPYTER_CONFIG_DIR=./jupyter/ jupyter notebook

My jupyter dir in current dir has the following structure:

jupyter/
- custom/
  - custom.css
  - custom.js