[Doesn’t work anymore, sorry, might fix that one day…] Customize your IPython notebook with CSS

In the coming IPython 1.0 (available on their github) you will be able to change the style of your notebook using a custom CSS file. Here are three attempts, which I will describe in details:

Creating a IPython profile

Credit and many thanks for this part go to Matthias Bussonier for his thorough explanatory blog on the subject.

Creating a profile is easy, you just type this line in a terminal:

ipython profile create yourprofilename

Note that you can send commands to the terminal from within your IPython notebook by writing %%bash in the first line of a code cell:

%%bash
ipython profile create yourprofilename

This has created a folder named profile_yourprofilename in your IPython folder. If you don’t know where this folder is, just type in a terminal

ipython locate

You have now a new profile ! In the future, to launch IPython with this new profile, use the command

ipython notebook --profile yourprofilename

To later rename a profile, go to your .ipython folder, rename the folder “profile_name” into “profile_newname”, then run

ipython profile create newname

For the moment your profile is identical to the default profile. Now go in your profile folder, and create a subfolder profile_yourprofile/static/css/. In this /css folder we will put CSS files and pictures to tune the appearance of the notebook. Start by creating a file custom.css, we will see how to fill it in the next sections. I just learned enough CSS to make the themes, so I am not really in control here. Comments and suggestions are welcome :)

Theme 1: A Clean Notebook

My favorite :) . Here is the content of my custom.css . I just hope that the structure and class names of IPynb html pages will not change too much in the future

/* file custom.css for the theme CleanNotebook */
div#notebook { /* centers the page content */
padding-left:20%;
padding-right:20%;
}

div.cell { /* Tunes the space between cells */
margin-top:1em;
margin-bottom:1em;
}

div.text_cell_render h1 { /* Main titles bigger, centered */
font-size: 2.2em;
line-height:1.4em;
text-align:center;
}

div.text_cell_render h2 { /*  Parts names nearer from text */
margin-bottom: -0.4em;
}



div.text_cell_render { /* Customize text cells */
font-family: 'Times New Roman';
font-size:1.5em;
line-height:1.4em;
padding-left:3em;
padding-right:3em;
}

#notebook li { /* More space between bullet points */
margin-top:0.8em;
}

div.cell.code_cell {  /* Areat containing both code and output */
background-color:#F1F0FF; /* light blue */
border-radius: 10px; /* rounded borders = friendlier */
padding: 1em;
}

Bonus: Motivational Penguin

I am really fond of the motivational penguin from chibird.com (thanks Jacqueline !!!).
motivational_penguin

If you want the motivational penguin to cheer you up on the side of your screen while you are coding, put the GIF file in the /css folder and add these few lines to the code above:

#notebook_panel {
background : url('motivational_penguin.gif') no-repeat left center ;
}

Theme 2: Zen of IPython

For this theme you will need to place each of these pictures in your CSS folder (I made all of them from Public Domain pictures from Wikimedia Commons and I put all of them in the Public Domain, where they belong).

The css code is surely far from optimized.

div#notebook {
padding-left:20%;
padding-right:20%;
}

div#ipython-main-app {
background: url('Shotei.jpeg') no-repeat top left;
}

body {
background : url('paper.jpeg') ;
}

div.cell {
margin-top:20px;
margin-bottom:20px;
}


h1 {
text-align:center;
}


div#notebook li {
margin-bottom:20px;
}

p,li,h1 {
line-height:120%;
}

p,ul {
padding-left:10%;
padding-right:10%;
}

.text_cell_render{
font-family: 'Palatino','Arial';
font-size:1.8em;
}

.text_cell h1 {
font-size: 2.2em;
text-align:center;
line-height:120%;
}

.text_cell h2 {
font-size: 1.8em;
margin-bottom:0;
}


div.input_area {
background: url('mountain_paper.png') ;
border-radius: 15px;
overflow:auto;
}


div.CodeMirror {
background: url('mountain.jpeg') repeat-y top right;
background-size: 20%;
padding-right:20%;
font-size: 1.3em;
}

div.CodeMirror-scroll {
padding-bottom:1.01em;
}

.output_wrapper{
background-image: url('sky.jpeg');
border-radius: 15px;
}

div.output {
border-radius: 15px;
background: url('cherryFlower.jpeg') repeat-y right;
background-size: 25%;
}

div.prompt.input_prompt{
display:none;
}

div.code_cell {
background: #e6ddce;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
font-size:14px;}

Theme 3: Gameboy

For this one you will need the buttons:
buttons

.prompt {display:none;}

div.cell.code_cell {
max-width: 800px;
background-color:white;
background:url('buttons.jpeg') no-repeat center bottom;
background-size:80%;
border-color: black;
border-radius: 30px;
padding-bottom:5px;
padding: 1em 1em 200px 1em;
}

div.output_wrapper {
margin-left:0px;
padding-left:0px;
padding-top:0px;
}

div.input_area, .output_stdout  {
margin-left:110px;
border-style:solid;
max-width:600px;
background-color: #626e02;
border-color: #656e7f;
border-width: 20px;

}

div.output_stdout {
border-top: none;
margin-top:-26px;
padding-top:26px;
}
div.CodeMirror-scroll {
padding-bottom:20px
}

div.CodeMirror, div.output_stdout pre {
padding: 0.5em 0.5em 0.5em 0.8em;
font-size: 1.6em;
font-family:"G.B.BOOT";
}

.cm-s-ipython { color: black; }
.cm-s-ipython span.cm-keyword {color: black;}
.cm-s-ipython span.cm-number {color: black;}
.cm-s-ipython span.cm-operator {color:black;}
.cm-s-ipython span.cm-meta {color: black;}
.cm-s-ipython span.cm-comment {color: black;}
.cm-s-ipython span.cm-string {color: black;}
.cm-s-ipython span.cm-error {color: black;}
.cm-s-ipython span.cm-builtin {color: black;}
.cm-s-ipython span.cm-variable {color: black;}
About these ads

3 comments on “[Doesn’t work anymore, sorry, might fix that one day…] Customize your IPython notebook with CSS

  1. Hi, Nice themes, I wrote a css theme selector here : http://nbviewer.ipython.org/urls/raw.github.com/Carreau/posts/master/02-css-selector.ipynb
    need some tweeks in your css to work. Basically recompile css from less.

    Yes there **will** be some class change but nothing that should change your theme.

    From class=’cell vbox’ to class=’cell’ with vbox included into cell with css mixin for better theming :-)

  2. […] Use iPython? Learn how to customize your notebook with CSS. […]

  3. Hello, I have been trying to get my ipython notebook to load the custom.css but it does not seem to find the style sheet. I am not sure what I am doing wrong… any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s