Adding logo to title slide

Question

How do I properly add logos to the top of the title slide?

After some trial and error, I came up with this which I add to the css file.

.title-slide.remark-slide-content:before{
  position: absolute;
  content:url(logo.svg);
  height:60px;
}

This seems to work for one logo and it's positioned on the top right. I would like to add another logo on the top left too. Is there a better way to do this?

score 6 · Answer 1 · answered Apr 17 '18 at 08:55

6

One way would be to create a custom title slide using seal: false with some divs.

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true 
      countIncrementalSlides: false
    seal: false
---

<div class="my-logo-left"></div>

<div class="my-logo-right"></div> 

# hello

---

CSS

.my-logo-left {
content: "";
    position: absolute;
    top: 15px;
    left:   20px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}

.my-logo-right {
content: "";
    position: absolute;
    top: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}

answered Apr 17 '18 at 08:55

pat-s

5,992
1
32
60

I was not aware of the 'seal' option. Does this solution add logos on the title slide? ie; where the YAML matter is displayed? title: "Presentation Ninja" subtitle: "⚔ with xaringan" etc. – mindlessgreen Apr 17 '18 at 12:53
1

When using `seal: false` the YAML information is not anymore parsed to the title slide because its a new CSS class (not `.title-slide` anymore) that is being used for this slide. You need to add it again and also format the slide to your needs (e.g. centered). – pat-s Apr 17 '18 at 13:00
If I were to dig into this further, would it be too complicated to add some new YAML options like `logo_right:bla.svg` or `logo_left:bla.svg` with some default CSS? – mindlessgreen Apr 17 '18 at 13:35
2

Idk, you would need to add new options that are parsed by `rmarkdown` within `moon_reader()`. I would assume that its too complicated for the outcome and that the `seal: false` workaround is much quicker. Once you got your title slide as you want it, you can simply re-use it in additional presentations. – pat-s Apr 17 '18 at 14:17
@rmf is the answer sufficient for you to get accepted? – pat-s Apr 19 '18 at 21:40
Not really. Waiting for a better solution :-) – mindlessgreen Apr 20 '18 at 06:00

Adding logo to title slide

1 Answers1