How can I modifiy the positions of the text and logo on RMarkdown title slide

Question

Because of the picture I have at the bottom of my title slide, I want to:

move all title, subtitle and author up from their center positions.
remove the Rlogo in the title slide only (don't really know how to do it). I could only remove slide number for now using .title-slide .remark-slide-number { display: none; }.

Any suggestion is appreciated! Thanks!

Here is my reproducible example:

tweaks.css file

/* for logo and slide number in the footer */
.remark-slide-content:after {
    content: "";
    position: absolute;
    bottom: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("Rlogo.png");
}

/* for background image in title slide */
.title-slide {
  background-image: url("slideMasterSample.png");
  background-size: cover;
}

.title-slide h1 {
  color: #F7F8FA;
  margin-top: -170px;
}

.title-slide h2, .title-slide h3 {
  color: #e7e8e2; 
  line-height: 1.0em;
  margin-top: -75px;
}

.title-slide .remark-slide-number {
  display: none;
}

1st attempt: modified margin-top in tweaks.css file as mentioned in xaringan wiki

---
title: "Presentation Ninja"
subtitle: "xaringan"
author: "Author"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "tweaks.css"]
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

Result 1:

2nd attempt: added <br> to the title to manually push it up but then the subtitle and author were also pushed down. Adding <br> to subtitle and author did not help either.

---
title: "Presentation Ninja<br><br><br><br><br><br>"
subtitle: "xaringan"
author: "Author"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "tweaks.css"]
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

Result 2:

Photos used

try using chrome or firefox developer tools to edit the CSS on the fly... — mb21, Feb 25 '18 at 18:00
Why didn't you keep editing the css until you got what you wanted? — Elin, Feb 25 '18 at 18:10
You didn't show any examples of that that I see. What values for the margins did you try? What values for sub title? Also did you set padding? — Elin, Feb 25 '18 at 18:52
Just look at what you copy and pasted ` background-image: url("Rlogo.png");` If you don't want the logo make that empty or put in what you do want. Read what is there, replace or change what you want to change. There's no magic, just step by step read and modify, refresh. — Elin, Feb 25 '18 at 18:56
@Elin: Thanks! I was very new to `CSS`. The reason I put `background-image: url("Rlogo.png");` was because I want that logo to be on every slide except the title slide. I was wondering if there is an option to remove it from the title slide only. I also tried reducing `padding-top` and `border-top` but they did nothing to the position of the text. — Tung, Feb 25 '18 at 19:01
Oh I see. Yes you can do complex things like that in css for example by applying a certain class to the title page that overrides the default background-image. — Elin, Feb 25 '18 at 21:09

score 28 · Accepted Answer · answered Feb 27 '18 at 21:46

Using seal: false you can create a title slide that is independent from the YAML header. It often simplifies slide creation imo.

For the R logo across all slides but the title slide, create a custom div and set it as a layout.

CSS:

.title-slide {
  background-image: url("slideMasterSample.png");
  background-size: cover;
}
.title-slide h1, h2, h3 {
  text-align: center;
  color: #F7F8FA;
}

.title-slide .remark-slide-number {
  display: none;
}

div.my-footer {
content: "";
    position: absolute;
    bottom: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("Rlogo.png");
}

Rmd:

---
title: "Presentation Ninja"
subtitle: "xaringan"
author: "Author"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["tweaks.css", "default"]
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    seal: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

class: title-slide   

# Header 1

## Header 2  

### Header 3 

---

layout: true

<div class="my-footer"></div>       

---

# new slide 1

---

# new slide 2

How can I modifiy the positions of the text and logo on RMarkdown title slide

1 Answers1