Shiny Presentation (ioslides): Custom CSS and logo

2020-06-03 08:44发布

问题:

I have the following installed:

  • preview release of RStudio, Version 0.98.864 (May 24th, 2014)
  • development versions of knitr and shiny, via devtools::install_github(c("yihui/knitr", "rstudio/shiny"))

I would like to create a Shiny Presentation (RStudio menu items: File>New File>RMarkdow>Shiny>Shiny Presentation) with custom CSS but am unsure how to do so.

My custom CSS (which currently only changes the colour of header 2)

h2 { 
 font-size:1.8em; 
 color: red;
}

works with an extract of an example given on the RMarkdown PResentations with ioslides webpage:

---
title: "Habits"
author: John Doe
date: March 22, 2005
output:
  ioslides_presentation:
    css: temp.css
---

    ## Getting up

    - Turn off alarm
    - Get out of bed

However, when I convert this to produce Shiny output by including runtime: Shinyin the preamble, the custom formatting no longer works.

---
title: "Habits"
author: John Doe
date: March 22, 2005
runtime: shiny
output:
  ioslides_presentation:
    css: temp.css
---


## Getting up

- Turn off alarm
- Get out of bed

## Slide with Interactive Plot

```{r, echo=FALSE}
inputPanel(
  selectInput("n_breaks", label = "Number of bins:",
          choices = c(10, 20, 35, 50), selected = 20),

  sliderInput("bw_adjust", label = "Bandwidth adjustment:",
          min = 0.2, max = 2, value = 1, step = 0.2)
)

renderPlot({
  hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
       xlab = "Duration (minutes)", main = "Geyser eruption duration")

  dens <- density(faithful$eruptions, adjust = input$bw_adjust)
  lines(dens, col = "blue")
})
```

Any tips on how to use a custom CSS with a Shiny presentation would be greatly appreciated.

Edit Similar to this problem, I have not been able to include my own logo by including the following in the front matter (obviously changing the png to one on my own system):

output:
   ioslides_presentation:
      logo: logo.png

nor do my ordered lists show a number Thanks.

回答1:

The issue opened for the custom css support was closed Jun 24, 2014.

Testing with the original question text does indeed show the h2 headings colored as stated in the css, also tested adding logo: Rlogo-1.png and indeed the logo is used.