3

I would like to use custom css in my learnr tutorial. This is how I placed my css.

The location of my rmd file: testing/testing.Rmd

The location of css file: testing/css/custom.css

---
title: "Hello, Tutorial!"
output: 
  learnr::tutorial:
    css: css/custom.css
runtime: shiny_prerendered
---

```{r setup, include=FALSE}
library(learnr)
```

This code computes the answer to one plus one, change it so it computes two plus two:

```{r addition, exercise=TRUE}
1 + 1
```

and in my custom.css file, I have this

/******
dplyr learnr tutorial
*******/

/*-------- Code chunk header panel ---------*/
.panel-default > .panel-heading {
    color: white;
    background-color: darkslateblue;
    border: 0;
}

When I press Run Document, the output looks like this

Output

So I have inspect the element, and I noticed that the custom.css is not set as priority

Inspect element

Any idea on this? MY current learnr package version is 0.10.1.

user2360397
  • 31
  • 4
  • 1
    Have you tried adding `!important`? E.g., `color: white !important;` – heds1 Jul 08 '21 at 07:01
  • @heds1 Thanks and yes, I did tried that and it worked but I want to look for other alternatives as my original css has about 100 lines and I want to avoid adding `!important` on each line. The example I provided here is just a reprex. I have tried the same code in Rstudio cloud and no luck it still will not use my custom.css as the priority. – user2360397 Jul 08 '21 at 11:06
  • This has been fixed in the dev version of learnr https://github.com/rstudio/learnr/issues/679 – grrrck Mar 28 '22 at 14:26

0 Answers0