CODEWITHSUNDEEP
cssrxaringan
Thomas Speidel
Thomas Speidel

Reputation: 1443

Xaringan Title Slide

In xaringan, I want to add a background in the title slide. I've managed to do that following Yihui's instructions.

This works, except I loose the default fonts (Yanone Kaffeesatz).

YAML:

---
title: "My title"
subtitle: "My subtitle"
author: "Me Myself"
date: "01/01/2012"
output:
  xaringan::moon_reader:
    css: my-theme.css
    lib_dir: libs
    nature:
      ratio: '16:9'
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---


where my-theme.css is as follows: 

.title-slide {
  background-image: url(Figures/MyBackground.jpg);
  background-size: cover;
}

Upvotes: 7

Views: 3189

Answers (2)

Yihui Xie
Yihui Xie

Reputation: 30164

I don't recommend you to add default-fonts.css to your my-theme.css. If you want the default fonts, you can use

output:
  xaringan::moon_reader:
    css: [default, default-fonts, my-theme.css]

See more info in Section 7.5 of the R Markdown book.

Upvotes: 7

Thomas Speidel
Thomas Speidel

Reputation: 1443

I think I've figured this out. I've added the font call to the custom css. So now my my-theme.css looks like:

.title-slide {
background-image: url(Figures/Suncor_2018_Background.jpg);
background-size: cover;
}


@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);

body { font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif; }
h1, h2, h3 {
  font-family: 'Yanone Kaffeesatz';
  font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace; }

I found this in default-fonts.css ...\library\xaringan\rmarkdown\templates\xaringan\resources

Upvotes: 0

Related Questions