xaringan Tip: Add A Logo to All of Your Slides

By Garrick Aden-Buie in Blog

October 16, 2019

Posted on:
October 16, 2019
3 minute read, 435 words
R Tips xaringan xaringan Tip
See Also:
branchMover: A Shiny app for moving the default branch of your GitHub repos
Pull Request Flow with usethis
Signed and verified: signed git commits with Keybase and RStudio

Here’s a quick tip to help solve a common xaringan problem: adding a logo to all of your slides.

The slightly problematic and somewhat annoying way to solve this problem is to add a logo to a series of slides using remarkjs' background-image and layout syntax.

background-image: logo.png
background-position: top right
background-size: 110px 120px
layout: true

## This slide has a logo


## This one does too

But you can't add a new background image!

layout: false

## This one doesn't have a logo :(

It works… as long as you don’t change your slide format or if you don’t mind repeating those 4 lines every time you need to reset your layout.

A logo for all the slides #

The xaringan logo appears on all the slides!

📺 Demo Slides

Instead, with a little bit of JavaScript and CSS, we can automatically insert a logo on all the slides in the presentation. Of course, we might not want a logo an all the slides, so we won’t add the logo to the .title-slide or any slide with class: hide-logo.

If you just want to jump straight to the solution, I’ve created a template repository on GitHub that you can use to bootstrap your next set of xaringan slides.

To set everything up manually takes just a few steps.

  • Download your logo and save it in your slides directory. I’ve used the xaringan hex logo: xaringan.png.

  • Download insert-logo.html into your slide directory, or copy the html described below into insert-logo.html.

  • Add insert-logo.html to your after_body includes in your slides' .Rmd file.

        after_body: insert-logo.html
  • Edit the .logo class in the CSS in insert-logo.html to use your logo image, and adjust the width, height and position (top, bottom, left, and/or right) as needed.

  • Use class: hide-logo to hide your logo on individual slides. (The title slide is automatically excluded.)

    class: inverse, hide-logo
  • Have fun looking 😎 during your presentation!

Inside insert-logo.html #

The insert-logo.html file is a simple snippet of CSS and a tiny bit of JavaScript. The CSS defines the .logo class that positions and sizes the logo, and the JavaScript inserts a <div> with class = "logo" into each slide.

.logo {
  background-image: url(xaringan.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 1em;
  right: 1em;
  width: 110px;
  height: 128px;
  z-index: 0;

    '.remark-slide-content' +
    ':not(.title-slide)' +
    // add additional classes to exclude here, e.g.
    // ':not(.inverse)' +
  .forEach(el => {
    el.innerHTML += '<div class="logo"></div>';

If you’d like to automatically keep the logo off certain slides, like the inverse slides, you can add additional :not(.class-to-exclude) to the CSS selector in the .querySelectorAll().