Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customizing IPython notebook / Jupyter slide show

I created a slideshow using the slideshow feature of IPython notebook / Jupyter, which works fine. I created and hosted the slides via ipython nbconvert ... which works fine too. But I cannot find any information how to customize the slides. Obviously I have to customize Reveal.js which is not very well documented too.

Can somebody give a starting point on how to get some copyright, logo, ... in the header/footer of my presentation?

like image 939
Achim Avatar asked Oct 29 '15 16:10

Achim


People also ask

How do you make a Slideshow on Jupyter Notebook?

The first step is to enable the Slideshow option in the View > Cell Toolbar options. Just click on the Slideshow option and continue reading. Each cell in the Jupyter Notebook will now have a Slide Type option in the upper-right corner.

Can I customize Jupyter Notebook?

Jupyter notebook is a great programming environment and often the most popular choice for Data Scientists or Data Analysts that are coding in python. Unfortunately, its default settings do not allow the level of customization that you have with standard programming environments such as PyCharm or similar tools.

How do you beautify a Jupyter Notebook?

The extension also provides the shortcut CTRL+L for prettifying the current cell (the same thing that the icon does), and CTRL+SHIFT+L for prettifying the whole notebook (if something else is not blocking these shortcuts, of course; but you can configure them).

How do I display an image in IPython notebook?

To display the image, the Ipython. display() method necessitates the use of a function. In the notebook, you can also specify the width and height of the image.


1 Answers

Reveal.js is really just a web template. If you want to customize it further, CSS/Javascript knowledge will be required.

A straightforward way to define header/footer is to change the CSS

.slides .header{
  position:absolute;
  top: -50%;
  left: -50%;
}
.slides .footer{
  position:absolute;
  bottom: 50%;
  left: -50%;
}

You can then insert your footer contents

<div class="footer">
   <p>Copyright ACME Incorporated ©2016</p>
</div>
like image 69
Hanxue Avatar answered Oct 20 '22 11:10

Hanxue