53

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

4
  • 1
    profiles were removed with IPython/Jupyter version 4.0, I have not yet discovered how to edit the CSS in 4.0 Sep 16, 2015 at 21:10
  • 2
    In 4.0, it's been moved to ~/.jupyter/custom/custom.css
    – Randy
    Oct 16, 2015 at 14:09
  • @RandyC: I have no such directory or file, and the existing answer below works.
    – orome
    Oct 16, 2015 at 14:16
  • 2
    Since 5.5.0 Conda users can find it in ~/anaconda3/lib/python3.7/site-packages/notebook/static/custom/custom.css (depending on the version of Python they're on).
    – ayorgo
    Jun 22, 2019 at 10:20

13 Answers 13

91

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>
8
  • 8
    Yes, but the question is really about doing this in configuration, not code.
    – orome
    Nov 6, 2015 at 16:02
  • 7
    FWIW, now the easier way to do it is by just using the html cell magic %%html
    – abalter
    May 10, 2017 at 14:15
  • 4
    This just seems to display the text of the CSS as output but not apply it to the notebook. What am I missing?
    – davidrpugh
    Jul 23, 2017 at 2:11
  • 1
    @davidrpugh both options still work for me. Note the <style></style> is required.
    – kynan
    Jul 25, 2017 at 21:20
  • 1
    This works great for me. Different notebook topics can be a custom theme if you wish. Apr 4, 2018 at 1:10
69

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.

8
  • 7
    This has no effect for me. Is this up to date?
    – orome
    Apr 6, 2016 at 16:16
  • Yes, I just tested it on clean Ubuntu 14.04 with latest version from pip. I've only edited the answer because you can miss ~/.jupyter folder after fresh Jupyter install.
    – m1lhaus
    Apr 9, 2016 at 9:53
  • 2
    Also keep in mind that you might need a !important on your CSS rule. Aug 1, 2016 at 18:42
  • 4
    Is there any way to use custom.css the same folder as the jupyter notebook?
    – ostrokach
    May 21, 2017 at 0:27
  • 1
    @ostrokach Oh wait, there is! See Diego Ortiz's answer below! :) Jan 29, 2020 at 14:00
24

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

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

custom folder instead of css folder.

10
  • 1
    Sure enough. I have no idea where .../css/custom.css came from. Confusingly though, .../custom/custom.css says "Placeholder for custom user CSS mainly to be overridden in profile/static/custom/custom.css. This will always be an empty file in IPython".
    – orome
    Aug 22, 2015 at 20:18
  • I've put the file in that /custom folder, but no effect. Did it help in your case, @raxacoricofallapatorius? I am using Jupiter
    – Ilya
    Jan 15, 2016 at 8:33
  • I have windows 7 64-bit, but I am not sure how to check the jupyter/iPython version
    – Ilya
    Jan 18, 2016 at 8:58
  • 8
    In a Jupyter/IPython notebook write: import jupyter_core;jupyter_core.paths.jupyter_config_dir() + '\\custom' to get the path to the custom folder Jan 18, 2016 at 9:26
  • Found, just different profile indeed, thanks. Though the line you provided did not help: jupyter_core was not found among the packages.
    – Ilya
    Jan 19, 2016 at 8:20
20

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
2
9

As of 2021, Jupyter 4.7, Ipython 7, the following location worked for me:

/home/$USER/.jupyter/custom/custom.css

Old answer:

According to Jupyter documentation custom.css should be put into the default_profile/static/custom folders.

You will find the location of your default profile by running in a Jupyter notebook cell:

import jupyter_core
jupyter_core.paths.jupyter_config_dir()

Which gave me:

'/home/sergey/.jupyter'

Afterwards, in .jupyter folder create directory structure like:

static
└── custom
    └── custom.css

As you see the desired structure is ~/.jupyter/static/custom/custom.css

This worked for me in Ubuntu 18.04 and latest Jupyter (October 2018)

7

Per the suggested documentation, I downloaded Anaconda3 first and from within Anaconda Navigator - Jupyter 5.0 Notebook is one of several pre-built options. I found my CSS file at this location.

C:\Users\YourUsername\Anaconda3\Lib\site-packages\notebook\static\custom\custom.css

0
6

I found a nice solution here: https://martinapugliese.github.io/jupyter-customise/

I needed to add this however:

<style>..</style>

from IPython.core.display import HTML

def _set_css_style(css_file_path):
   """
   Read the custom CSS file and load it into Jupyter.
   Pass the file path to the CSS file.
   """

   styles = open(css_file_path, "r").read()
   s = '<style>%s</style>' % styles     
   return HTML(s)
5

For base conda environment I found it here: ~/Programs/Anaconda3/lib/python3.6/site-packages/notebook/static/custom

For custom conda environment I found it here: ~/Programs/Anaconda3/envs/[environment name]/lib/python3.6/site-packages/notebook/static/custom

Works under Ubuntu 18.04, conda 4.6.8.

2

I am running Jupyter on Google Cloud Platform using Tensorflow Docker image and it was located at /usr/local/lib/python2.7/dist-packages/notebook/static/custom/. In Any case, you can find it by searching for it.

2

Can't add comment due to reputation so I'll post as an answer.

The /custom/custom.css stopped working for me when I generated a config file, but if anyone stumbles to this problem too, the solution is to uncomment the line c.NotebookApp.extra_static_paths = [] in the jupyter_notebook_config.py file and add "./custom/" - or whatever path you chose for your custom css - inside the brackets.

P.S.: OS is Linux Manjaro 5.12 and Jupyter Notebook version is 6.3.0.

2
  • Where exactly is the .py located?
    – amzon-ex
    Jul 4, 2021 at 6:37
  • 1
    @amzon-ex on linux it's usually on the /home/.jupyter folder (a hidden folder, so you have to press Ctrl+h to see it). On Windows I'm not sure but it's probably on C:\Users\username\.jupyter. If you don't have a config file yet you can create with the command jupyter notebook --generate-config
    – gmolnar
    Jul 5, 2021 at 15:10
1

For Windows

C:\Users\<username>\.jupyter\custom\custom.css

the above will override the default location: in site-packages https://github.com/jupyter/jupyter/issues/295

0

If you install it via PIP and not Anaconda, then it's going to be in this folder
C:\Users\<user-name>\AppData\Local\Programs\Python\Python37\Lib\site-packages\notebook\static\custom
From here you can find the custom.css file and edit that to get the changes reflected. You will also have the custom.js file present there as well.

1
  • Actually %APPDATA%\Python\Python39\site-packages\notebook\static\custom.
    – Amit Naidu
    Mar 14 at 23:27
-1

Ubunutu 18.04

Folder ~/venv/lib/python3.8/site-packages/notebook/static/custom

venv is the virtual environment name so the location is relative to your environment's location.

Here, there is a placeholder file, 'custom.css'. Override it with your own css.

Any machine with Conda installation

C:\Users******.conda\envs\py37\lib\site-packages\notebook\static\custom

Use the path relative to .conda. My environment name is py37

Place your custom css in the custom.css file here.

Reload jupyter notebook.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.