Customising CSS within RMarkdown Slidy Presentations

Question

So, there are a few questions on SO but none that seem to have solved this particular issue.

I am looking to customise my RMarkdown/Slidy presentation, created from RStudio, with a custom CSS template.

RStudio already allows minimal customisation using the built-in Bootswatch themes, accessible thus output: slidy presentation / theme: readable
There are other Bootswatch themes that are not built-in; specifically I might want to use Cyborg or Slate, which have a nice dark background (instead of white)

The following is an intuitive solution for overriding the Slidy CSS with a custom file:

```{css}

<link href="bootstrap-slate.css" rel="stylesheet">

```

However, it fails with:

pandoc.exe: Could not fetch .\../fonts/glyphicons-halflings-regular.eot
.\../fonts/glyphicons-halflings-regular.eot: openBinaryFile: does not exist (No such file or directory)
Error: pandoc document conversion failed with error 67
In addition: Warning message:
running command '"C:/Program Files/RStudio/bin/pandoc/pandoc" +RTS -K512m -RTS segmentations.utf8.md --to slidy --from 
markdown+autolink_bare_uris+ascii_identifiers+tex_math_single_backslash --
output segmentations.html --smart --email-obfuscation none --self-contained --template "C:\Users\ME\Documents\R\R-3.3.3\library\rmarkdown\rmd\slidy\default.html" --include-in-header 
"C:\Users\ME\AppData\Local\Temp\RtmpGYLCFf\rmarkdown-str378022cf50b0.html" --mathjax --variable "mathjax-url:https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" --highlight-style pygments' had status 67 
Execution halted

Any suggestions would be welcome. Note that the solution in the documentation rMarkdown documentation does not work. Solution there copied here for reference:

---
output:
  slidy_presentation:
    css: styles.css         ## 
---

Error in yaml::yaml.load(string, ...) : 
  Scanner error: mapping values are not allowed in this context at line 5, column 21
Calls: <Anonymous> ... parse_yaml_front_matter -> yaml_load_utf8 -> <Anonymous> -> .Call
Execution halted

The last example works fine for me. Make sure you have the right indentation (2 spaces at the beginning of each line) and no obsolete spaces or other characters somewhere (like the hashes)... — Martin Schmelzer, Jun 06 '17 at 08:41
Hey Martin, thanks for your reply. Unfortunately I'm still struggling, can you tell me where you put the css file? I have it in the same directory as my rmd file, i.e. in working directory. (All spaces duly removed, hashes were put in the above code only as a signpost). — JohnL_10, Jun 06 '17 at 21:59
Thanks Martin. Tried it again, there is a different issue this time as the error message now reads: `pandoc: Could not fetch ./../fonts/glyphicons-halflings-regular.eot ./../fonts/glyphicons-halflings-regular.eot: openBinaryFile: does not exist (No such file or directory) Error: pandoc document conversion failed with error 67 Execution halted` — JohnL_10, Jun 07 '17 at 02:03
From the sound of the error message, perhaps the css file needs to contain certain font(s) in order to be compatible? I'm using a theme from `https://bootswatch.com/slate/bootstrap.css` — JohnL_10, Jun 07 '17 at 02:04

score 1 · Answer 1 · answered May 31 '18 at 16:30

Much time after the question, but for posterity:

I found this code to work largely using your own example. Used a local css file.

Rmarkdown:

---
title: "CSS and Slidy"
author: Your name here
date: 2018-05-31
output: 
  slidy_presentation
---

Outline
======================================================

<link href="foo.css" rel="stylesheet">

- Hello
- World

Associated css file:

body {
    color: blue;
}

h1 {
    color: green;
}

Output:

Note: I found this Customising CSS within RMarkdown Slidy Presentations did NOT work:

---
output:
  slidy_presentation:
    css: foo.css          
---

score 0 · Answer 2 · answered Jun 07 '17 at 02:12

I've managed to answer my own question by developing my understanding of Bootstrap

I needed to use the entire Bootstrap directory, not just the Bootswatch theme css file in my WD. Then, to use "Slate" or whichever, involves replacing the default Bootstrap.css with the new theme.

This Post (how to include glyphicons in bootstrap 3) has a top answer that describes it perfectly:

Customising CSS within RMarkdown Slidy Presentations

2 Answers2

Rmarkdown:

Associated css file:

Output: