CODEWITHSUNDEEP
ipythonjupyterihaskell
orome
orome

Reputation: 48526

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

Upvotes: 55

Views: 77366

Answers (13)

Diego Ortiz
Diego Ortiz

Reputation: 301

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

Upvotes: 20

gmolnar
gmolnar

Reputation: 108

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.

Upvotes: 2

Sergey Bushmanov
Sergey Bushmanov

Reputation: 25209

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)

Upvotes: 9

Abhishek Sahu
Abhishek Sahu

Reputation: 46

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.

Upvotes: -1

user3226167
user3226167

Reputation: 3439

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

Upvotes: 1

Chandra Kanth
Chandra Kanth

Reputation: 427

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.

Upvotes: 0

J. Khoury
J. Khoury

Reputation: 679

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

Upvotes: 7

Apogentus
Apogentus

Reputation: 6613

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.

Upvotes: 5

Martin Alexandersson
Martin Alexandersson

Reputation: 1437

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)

Upvotes: 6

m1lhaus
m1lhaus

Reputation: 879

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.

Upvotes: 71

kynan
kynan

Reputation: 13643

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>

Upvotes: 97

Thoran
Thoran

Reputation: 9470

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.

Upvotes: 1

kikocorreoso
kikocorreoso

Reputation: 4219

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

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

custom folder instead of css folder.

Upvotes: 25

Related Questions