20

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?

John Smith
  • 1,059
  • 1
  • 13
  • 35
  • where are you adding the script(which change the transition) mentioned in the second ? – rusty Jan 20 '16 at 11:30
  • 1
    You paste it in a cell and make it of type "Raw NBConvert". But step 2 does not work with new Jupyter version 4.2.1 for me. – Valentas Jun 14 '16 at 06:16
  • In 2022 1 and 2 no longer work (and it was impressively hard to find a modern answer, so I'm posting this note here -- this answer still ranks high in search). Instead, you probably want the `SlidesExporter.reveal_transition` and `SlidesExporter.reveal_theme` settings. Example: to remove the default fade, edit `~/.jupyter/jupyter_lab_config.py` to add the following line: `c.SlidesExporter.reveal_transition = 'none'`. – kgr Jun 16 '22 at 16:01

2 Answers2

9

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>
user2314737
  • 27,088
  • 20
  • 102
  • 114
Benny Chin
  • 106
  • 1
  • 3
1

You can change the general theme or the transitions.

The basic idea is to create a config file slides_config.py somewhere (i.e. in the same folder as your slides):

c = get_config()
c.Exporter.template_file = 'default_transition'

Then, you create another template file default_transition.tpl:

{%- extends 'slides_reveal.tpl' -%}


{% block body %}

{{ super() }}

<script>

Reveal.initialize({

    // Display controls in the bottom right corner
    //controls: true,

    // Display a presentation progress bar
    //progress: true,

    // Push each slide change to the browser history
    //history: false,

    // Enable keyboard shortcuts for navigation
    //keyboard: true,

    // Enable touch events for navigation
    //touch: true,

    // Enable the slide overview mode
    //overview: true,

    // Vertical centering of slides
    //center: true,

    // Loop the presentation
    //loop: false,

    // Change the presentation direction to be RTL
    //rtl: false,

    // Number of milliseconds between automatically proceeding to the
    // next slide, disabled when set to 0, this value can be overwritten
    // by using a data-autoslide attribute on your slides
    //autoSlide: 0,

    // Enable slide navigation via mouse wheel
    //mouseWheel: false,

    // Transition style
    transition: 'concave', // default/cube/page/concave/zoom/linear/fade/none

    // Transition speed
    //transitionSpeed: 'default', // default/fast/slow

    // Transition style for full page backgrounds
    //backgroundTransition: 'default', // default/linear/none

    // Theme
    theme: 'sky' // available themes are in /css/theme

});

</script>

{% endblock body %}

Additionally, when you want to change some CSS details, you can create a custom CSS file custom.css and add your desired content in there.

The custom CSS file gets loaded automatically.

user2314737
  • 27,088
  • 20
  • 102
  • 114
Lukas
  • 2,330
  • 2
  • 22
  • 31
  • 1
    The blog you have referenced is very old. Now it convert using the command *Jupyter nbconvert slideshow.ipynb --to slides --post serve* I still do not know how to put logo on each slide. – rusty Jan 07 '16 at 13:22
  • 2
    indeed, the solution given in the blog does not work anymore and it is difficult to find another solution to change the presentation's default parameters – meduz Feb 16 '16 at 16:04