CSS strips Kable Styling in ioslides

Question

I am trying to put together an ioslides presentation with R Markdown. To remove the gray gradient at the bottom of the output, I've created a "style.css" file that contains the below and it works great:

slides > slide {
  background: linear-gradient(#ffffff, #ffffff 85%, #ffffff);
  background-color: white;
  }

However, I'm also trying to use kable() and kabel_styling() for my tables and adding the files makes the kable() tables lose their formatting.

Here is my YAML Header

---
title: "Research"
subtitle: "Ben Howell"
author: "Student at School"
date: "`r Sys.Date()`"
output: 
  ioslides_presentation:
    css: style.css
---

and a reprex of my table:

x <- c(2, 3, 4, 1, 3)
y <- c(12, 11, 17, 14, 25)

test <- data.frame(x, y)

test %>%
  knitr::kable(booktabs = TRUE) %>%
  kable_styling(bootstrap_options = c("striped", "hover"), font_size = 16,
                position = "center", full_width = FALSE) %>%
  row_spec(0, bold = TRUE, font_size = 20)

I'd really like to be able to make the css file remove the gray gradient while not affecting anything else. I appreciate the help!

(Also, if anyone knows what other YAML headers work for author/affiliation/etc in ioslides, I'd appreciate that too so I can break up my "author" heading into two. Thanks!)

Can you edit your reprex and have the entire .Rmd file as one so I can recreate your example? I am having trouble showing the kable in the iosslide. Thank you — Daniel_j_iii, Nov 11 '20 at 02:26

Martin Schmelzer · Accepted Answer · 2020-12-10T07:25:18.970

When including your own stylesheet, the default bootstrap styles (the default theme) are not applied to your document. And that includes the class .table-striped. You can include the default theme first and then your custom styles:

---
title: "Research"
subtitle: "Ben Howell"
author: "Student at School"
date: "`r Sys.Date()`"
output: 
  ioslides_presentation:
    css: [!expr 'system.file(package = "rmarkdown", "rmd", "h", "bootstrap", "css", "bootstrap.css")', 'styles.css']
---

Or you copy the content of bootstrap.css to your styles.css and only add your additional styles.

CSS strips Kable Styling in ioslides

1 Answers1