ErrantBard ErrantBard - 1 month ago 9
CSS Question

Override reveal.js in R Markdown presentation

I'm trying to bring together a reveal-js presentation i rmarkdown but is having trouble overriding the default css theme. I would like to remove border from my plot images. According to the documentation this should work:

Custom-css

But it doesn't, which I guess is because this override isn't more specific. But my problem is my usual ways of increasing specificity doesn't work either:

## Slide with Plot
<section class = "no-border">
```{r pressure}
plot(pressure)
```
</section>


This is the YAML-header:

title: "Title"
author: "..."
date: '`r paste(format(Sys.Date(),"%d")," ", mymonths[sys.man], ", ",
format(Sys.Date(),"%Y"), sep = "")`'
output:
revealjs::revealjs_presentation:
incremental: true
includes:
in_header: slidy_bootstrap_header.html
css: slidyStandard.css


And this is the css-override:

section.no-border > img {
background:none;
border:none;
box-shadow:none;
}


Anybody that knows what I'm doing wrong?

Answer

The problem seems to be, that your <section> tag is not being wrapped around the source code and its output. What you could do is to go with jQuery:

---
title: "Title"
author: "..."
output:
  revealjs::revealjs_presentation:
    incremental: true
    includes:
      css: slidyStandard.css
---

<!-- Include jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Add class to img elements -->
<script type="text/javascript">
$(document).ready(function() {
  $elms = $('p > img');
  $elms.addClass('no-border');
});
</script>

<!-- define no-border class -->
<style>
.no-border {
  border: 0px !important;
}
</style>

```{r pressure}
plot(pressure)
```

enter image description here

Comments