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

Question

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

profiles were removed with IPython/Jupyter version 4.0, I have not yet discovered how to edit the CSS in 4.0 — talloaktrees
– talloaktrees, Commented Sep 16, 2015 at 21:10
@RandyC: I have no such directory or file, and the existing answer below works. — orome
– orome, Commented Oct 16, 2015 at 14:16
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
– ayorgo, Commented Jun 22, 2019 at 10:20

kynan · Accepted Answer · 2017-07-25 21:20:03Z

97

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>

edited Jul 25, 2017 at 21:20

answered Nov 6, 2015 at 15:58

kynan

13.7k6 gold badges82 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

orome Over a year ago

Yes, but the question is really about doing this in configuration, not code.

abalter Over a year ago

FWIW, now the easier way to do it is by just using the html cell magic %%html

davidrpugh Over a year ago

This just seems to display the text of the CSS as output but not apply it to the notebook. What am I missing?

kynan Over a year ago

@davidrpugh both options still work for me. Note the <style></style> is required.

JackNorthrup Over a year ago

This works great for me. Different notebook topics can be a custom theme if you wish.

|

Kyle Kelley · Accepted Answer · 2017-08-09 19:36:48Z

71

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.

edited Aug 9, 2017 at 19:36

Kyle Kelley

14.2k9 gold badges51 silver badges80 bronze badges

answered Jan 12, 2016 at 11:22

m1lhaus

8791 gold badge7 silver badges10 bronze badges

8 Comments

orome Over a year ago

This has no effect for me. Is this up to date?

m1lhaus Over a year ago

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.

Joe Hildebrand Over a year ago

Also keep in mind that you might need a !important on your CSS rule.

ostrokach Over a year ago

Is there any way to use custom.css the same folder as the jupyter notebook?

Rastapopoulos Over a year ago

@ostrokach Oh wait, there is! See Diego Ortiz's answer below! :)

|

kikocorreoso · Accepted Answer · 2015-08-22 16:51:09Z

25

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

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

custom folder instead of css folder.

answered Aug 22, 2015 at 16:51

kikocorreoso

4,2391 gold badge21 silver badges26 bronze badges

10 Comments

orome Over a year ago

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

SBF Over a year ago

I've put the file in that /custom folder, but no effect. Did it help in your case, @raxacoricofallapatorius? I am using Jupiter

SBF Over a year ago

I have windows 7 64-bit, but I am not sure how to check the jupyter/iPython version

kikocorreoso Over a year ago

In a Jupyter/IPython notebook write: import jupyter_core;jupyter_core.paths.jupyter_config_dir() + '\\custom' to get the path to the custom folder

SBF Over a year ago

Found, just different profile indeed, thanks. Though the line you provided did not help: jupyter_core was not found among the packages.

|

amzon-ex · Accepted Answer · 2021-11-06 09:41:23Z

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

This answer should be way higher! It took me hours to find how to define a per-project config!

Sergey Bushmanov · Accepted Answer · 2021-05-02 15:41:20Z

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)

MarianD · Accepted Answer · 2020-02-15 21:33:20Z

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

Martin Alexandersson · Accepted Answer · 2018-05-03 07:56:32Z

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)

Apogentus · Accepted Answer · 2019-03-23 14:06:14Z

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.

gmolnar · Accepted Answer · 2021-06-08 19:29:58Z

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.

@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

Thoran · Accepted Answer · 2016-04-29 07:39:27Z

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.

user3226167 · Accepted Answer · 2020-12-01 10:05:06Z

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

Chandra Kanth · Accepted Answer · 2020-10-12 09:38:24Z

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.

Actually %APPDATA%\Python\Python39\site-packages\notebook\static\custom.

Abhishek Sahu · Accepted Answer · 2021-03-16 09:06:53Z

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.

Collectives™ on Stack Overflow

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

13 Answers 13

8 Comments

8 Comments

10 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

8 Comments

8 Comments

10 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Linked

Related