Customize font for Pandas dataframe in Juypter lab console using CSS

Question

I am trying to add CSS rules to my Jupyter Lab Console to customize the look of only pandas dataframes and I have successfully done this interactively in the console. What I want is to have my CSS rules applied to the Jupyter Lab Console when it starts so that I don't have to do this interactively. I have successfully added these style customizations to the pandas dataframe itself (df.style.apply()) but I don't want to have to add it to every dataframe I create interactively.

Pandas dataframes are classed as .dataframe. I have created a Jupyter Lab start-up file called "00-first.py" and have it in the .ipython/profile_default/startup/ directory. The file contents are:

    from IPython.display import HTML, display
    import pandas as pd
    import numpy as np
    style = '''<style>
            .dataframe td {font-family:"Liberation Mono";} 
            .dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;} 
            </style>'''
    display(HTML(style))
    display(HTML("Environment personalization complete."))

When I launch the console I can confirm the 00-first.py file has been executed as dir() shows the "style" variable, pd and np. The message string does not print out and the style does not appear in the CSS of the web page.

If I create a dataframe, it is displayed with the default css font. To get the styling to take place, I manually run display(HTML(style)) and then all dataframes now have the new css style.

I am trying remove having to type display(HTML(style)) at the beginning of each console session and want the startup script "00-frist.py" to handle this.

I am using Jupyter Lab 1.1.4 on Linux Manjaro Linux 5.6.7-1-MANJARO x86_64 GNU/Linux using Firefox 75.0.

How do I do this or is there a better way to do this?

Before: without styling

After: with styling

XsummusX · Accepted Answer · 2020-05-08 19:11:12Z

0

I tried multiple incantations of NotebookApp.extra_static_pathsList as suggested by @jayveesea but could not get this method to work. The solution I found turned out to be quite simple and that is to edit the base CSS file, adding my CSS selectors there.

Find your Jypyter application directory using jupyter lab path from the command prompt. This will be something like /home/fred/anaconda3.
Find the index.css file for the theme you use. This file will be located under your Jupyter Application directory, under the directory of the theme you are using. For example, if your Jupyter application directory is '/home/fred/anaconda3' and the theme you are using is 'theme-light-extension', then the index file will be located at /home/fred/anaconda3/share/jupyter/lab/themes/@jupyterlab/theme-light-extension/index.css
Add your CSS selectors to the file.

    /* pandas dataframe customizations */
    .dataframe td {font-family:"Liberation Mono";} 
    .dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}

Restart your Jupyter console and you should see all pandas dataframes formatted following these rules.

One downside to this method is that you have to add your CSS rules to any extensions you want to support these rules, but this works for me since I don't switch extensions.

answered May 8, 2020 at 19:11

XsummusX

431 silver badge5 bronze badges

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

1 Comment

jayveesea Over a year ago

sorry about that, it looks like that method might be abandoned. I updated my answer with another option in case you want to start using themes or don't want to update these directly (maybe gets overwritten with an update?)

jayveesea · Accepted Answer · 2020-05-12 13:43:31Z

0

Take a look here for using the config file for jupyter. In particular NotebookApp.extra_static_paths option:

NotebookApp.extra_static_pathsList Default: []

Extra paths to search for serving static files.

This allows adding javascript/css to be available from the notebook server machine, or overriding individual files in the IPython

UPDATE: It seems like the above method might be broken and maybe abandoned. Another solution is to use the following path to store custom CSS: .jupyter\custom which does not need any update to the config file.

So in this case .jupyter\custom\custom.css would contain:

.dataframe td {font-family:"Liberation Mono";} 
.dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}

edited May 12, 2020 at 13:43

answered May 6, 2020 at 18:42

jayveesea

3,25916 silver badges29 bronze badges

1 Comment

jayveesea Over a year ago

Also, see here

Collectives™ on Stack Overflow

Customize font for Pandas dataframe in Juypter lab console using CSS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related