TheLazy.Dev
Portfolio GitHub

Blog

jupyter |python

Style your jupyter notebook

hamza777

Hamza

Posted on August 15, 2021

Style your jupyter notebook

Hello Everyone, Today I will talk about how you can style your jupyter notebook and make it look the way you prefer. If you are a python programmer, jupyter notebook is an awesome platform. If you want jupyter notebook on your system, you can either install Anaconda Navigator or just directly install jupyter notebook on your system.
So, after you are done setting up jupyter notebook on your system you need to navigate to the following path in your system:

C:\Users\{username}\.jupyter
Enter fullscreen mode Exit fullscreen mode

Here username can be your name, you all know what that is any way.
Now, here you might see a folder named custom which consists of a custom.css file or you may not. But do not panic you can always create a custom folder with a custom.css file on your own. Make sure you do not change the names of folders and files.

Here are some specifiers to keep in mind:

#notebook-container : can be used to style the container of input boxes.
.notebook_app : class name of the whole body of the app.
body > #header : controls the styling of the header.
.navbar-default : controls styling of the navbar.
.navbar-default .navbar-nav > li > a : styling links in navbar
#kernel_indicator : styling the kernel indicator.
div.input_area : styling the input area
div.cell : styles the cell containing the input area
.dropdown-menu : styles the dropdown menus of the navigation links.
div.output_wrapper : styles the output wrapper
Enter fullscreen mode Exit fullscreen mode

So, let's get started. Now I will walk you through some css that you can apply to your jupyter notebook.

Style the Container of all the input areas

CSS:

#notebook-container{
    box-shadow: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Here I have just removed the box shadow of the container but you can do your own kind of styling like giving it a border-radius or something.
container

You can change the appearance the whole page itself using the following selector

CSS:

.notebook_app {
    background: #fff !important;
}
Enter fullscreen mode Exit fullscreen mode

Here I just made the whole body's background to white but you can do your own styling.

You can style the header using the following code

CSS:

body > #header {
    background:  #000;
    color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

I changed the color of the header to black and the font color to white link in the picture below.
header

You can personalize the navbar using the code below

CSS:

.navbar-default {
    background: none;
    border: none;
}
Enter fullscreen mode Exit fullscreen mode

nav

If you are looking to style the links inside the navbar then this is the way to do it

CSS:

.navbar-default .navbar-nav > li > a, #kernel_indicator {
    color: rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid #f57b00;
    transition: all 0.25s;
}

.navbar-default .navbar-nav > li > a:hover, #kernel_indicator:hover {
    border-bottom: 2px solid #fff;
    color: rgba(255, 255, 255, 1);
}
Enter fullscreen mode Exit fullscreen mode

Well this piece of code also styles the kernel_indicator which you can see on the right end with python written inside it.
nav links

Style the input area and the cell that contains it

CSS:

div.input_area {
    border: none;
    border-radius: 0;
    background: #f7f7f7;
    line-height: 1.5em;
    margin: 0.5em 0;
    padding: 0;
}

div.cell {
    transition: all 0.25s;
    border: none;
    position: relative;
    top: 0;
}
Enter fullscreen mode Exit fullscreen mode

See the changes in the picture below
Input Area

Style the dropdown menus

CSS:

.dropdown-menu {
    z-index: 999999 !important;
    background-color: #000;
    color: #fff;
    opacity: 0.95;
}
Enter fullscreen mode Exit fullscreen mode

dropdown

There's a lot more to it.
I know what I did doesn't look all that awesome but hey, now that you know how, you can do much more.
Here's the full CSS:

/*This file contains any manual css for this page that needs to override the global styles.
This is only required when different pages style the same element differently. This is just
a hack to deal with our current css styles and no new styling should be added in this file.*/

#ipython-main-app {
    position: relative;
}

#jupyter-main-app {
    position: relative;
}

#notebook-container{
    box-shadow: none !important;
}

.container {
    width: 80% !important;
}

.notebook_app {
    background: #fff !important;
}

body > #header {
    background:  #000;
    color: #fff;
}

.navbar-default {
    background: none;
    border: none;
}

.navbar-default .navbar-nav > li > a, #kernel_indicator {
    color: rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid #f57b00;
    transition: all 0.25s;
}

.navbar-default .navbar-nav > li > a:hover, #kernel_indicator:hover {
    border-bottom: 2px solid #fff;
    color: rgba(255, 255, 255, 1);
}

div.input_area {
    border: none;
    border-radius: 0;
    background: #f7f7f7;
    line-height: 1.5em;
    margin: 0.5em 0;
    padding: 0;
}

div.cell {
    transition: all 0.25s;
    border: none;
    position: relative;
    top: 0;
}

div.cell.selected, div.cell.selected.jupyter-soft-selected {
    border: none;
    background: transparent;
    box-shadow: 0 6px 18px #aaa;
    z-index: 10;
    top: -10px;
}


div#pager {
    opacity: 0.85;
    z-index: 9999;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: transparent;
    border-bottom: 2px solid #fff;
}

.dropdown-menu {
    z-index: 999999 !important;
    background-color: #000;
    color: #fff;
    opacity: 0.95;
}

.dropdown-menu > li > a {
    color: #fff;
}

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
    color: rgba(255, 255, 255, 0.25);
}

.navbar-nav > li > .dropdown-menu {
    border: none;
    box-shadow: none;
}

div.output_wrapper {
    background: #eee;
}

div.cell.unselected div.output_area{
    box-shadow: inset 0 0 25px #aaa;
    padding: 1em 0;
    overflow-x: auto;
    transition: all 0.25s;
}

div.cell.selected .output_area {
    box-shadow: inset 0 0 5px #aaa;
    padding: 0.5em 0;
    overflow-x: auto;
}

div.cell.selected .div.output_scroll {
    box-shadow: none;
}

div.output_wrapper {
    margin: 0 0 1em;
    transition: all 0.25s;
}

div.cell.selected .output_wrapper {
    margin: 0;
}

.dataframe {
    background: #fff;
    box-shadow: 0px 1px 2px #bbb;
}

.dataframe thead th, .dataframe tbody td {
    text-align: right;
    padding: 1em;
}

.output, div.output_scroll {
    box-shadow: none;
}

.rendered_html pre code {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #2a7bbd;
    color: #444;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

h1, .h1 {
    font-size: 33px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.5em !important;
    color: #2a7bbd;
}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
hamza777
Hamza

Posted on August 15, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Lower bound on unitarity
jupyter Lower bound on unitarity

November 29, 2024

Cut off the excess (approximate)
jupyter Cut off the excess (approximate)

November 29, 2024

Graphs as methods of implication
jupyter Graphs as methods of implication

November 28, 2024

Game strategies tree
jupyter Game strategies tree

November 28, 2024

How to install jupyter notebook
jupyter How to install jupyter notebook

November 16, 2024