How to modify reveal.js slide settings in a ipython/jupyter notebook

Question

I'm writing reveal.js slides using the jupyter/iPython notebook. I would like to change some of the default settings is an easy way. Things I already managed (in case it helps someone)

1. Change the theme

Change the theme by adding a raw cell containing

<link rel="stylesheet" href="reveal.js/css/theme/sky.css" id="theme">

2. Changing the reveal.js configuration

The problem with nbconvert is that it loads reveal.js after all the cell syntax, so just adding the <script>Reveal.configure(...)</script> in the same way doesn't work (Reveal will still be unknown). The solution is to make sure the code is executed after the document has loaded:

<script type="text/javascript">

$(document).ready(function(){

    Reveal.configure({
        transition: 'convex' // none/fade/slide/convex/concave/zoom
    })
});    
</script>

3. Changing other things

This is where I fail:

How can I set the behavior of fragments, or the background of a specific slide?

Answer 1

Maybe this is a little bit late:

Although some of them do not work, but I found another post from the same blog mention above: Customizing your IPython slides, might be what you are asking for .

the custom.css still works for me (with Jupyter 4 and Revealjs 3.0.0). just put the custom.css file in the same directory where your .html is in.

to change font (remember the '.reveal'):

.reveal p {
font-family: 'Raleway', sans-serif;
color: #2d28cc;
}

to add a background (but the background colors from the theme will disappear, maybe need more css tweak):

body {
  background: url(logo.png)
  no-repeat
  left center;
padding: 5px 0 5px 25px;
}

to add things to specific slides, I would use a custom div, e.g.:

div.footer {
font-size:14pt;
font-style: italic;
color: #4aaeee;
text-align: center
}

then add this to the jupyter cell:

<div id="footer">...</div>