Customizing your IPython slides

2013-09-03 16:08 | Source | Minimap

Some days ago, I received this message on G+:

In a future release, would be handy to add custom classes to slides so that you can use CSS rules to choose certain layouts for image slides, text, multiple charts, etc.

But... we already support this kind of customization! And it is clearly my fault that you don't know about this feature... so:

I am very sorry for the lack of proper documentation (I am working on that ;-)).
In the meantime, you can look at this blog where I am documenting some important things for this slideshow platform.
You can also ask me whatever you want by twitter, G+, open issues at Github or make comments here, in my blog.

Using this message as a trigger (and following with the serie of blog posts explaining some of the IPython slides features), I will explain you how to customize your IPython slides in just two steps:

NOTE: I will use, as a starting point, the following slides of a talk I gave to journalist and designers at Hacks/HackersBA, a story to write in another blog post...

Step 1. Create a custom.css file containing your css rules.

In [2]:

!cat /media/datos/Desarrollos/hackperiodismo/custom.css

/*Some css fixes to use night theme with IPython slides*/
body {
background-color: #111111;
}
.reveal p {
color: white;
}
.reveal ul, ol {
color: white;
}
div.output_area pre {
color: white;
}
div.output_stderr {
background: #F00;
}
.reveal table th, .reveal table td {
color: white;
}

Step 2. Put this custom.css file in the same dir where your slides lives.

In [3]:

!ls /media/datos/Desarrollos/hackperiodismo

custom.css  figs  index2.html  index.html

NOTE: Here, I previously renamed my notebook.slides.html to index.html but it is not necessary for the customization.

And you are done!

The slideshow will read the custom.css file at last and overwrite the css rules according to your desires.

Pretty easy! ;-)

And now, the example slides rendered with a new darker style...

NOTE: In this case I applied the NIGHT reveal theme (adding ?theme=night to the url) and used the custom.css file to adjust some details ;-) (darker reveal themes need this kind of customization to be rendered OK).

You can change more fundamental things and make crazy stuff... just go ahead and let me know.

Enjoy!

Damián.

Did you like the content? Great!

Or visit my support page for more information.

Btw, don't forget this blog post is an ipynb file itself! So, you can download it from the "Source" link at the top of the post if you want to play with it ;-)