R Markdown change backround color of sections in CSS

Question

I was wondering if its possible to change the background color of an rmarkdown based flexdashboard with css.

In particular, I have a document structure like this:

---
  title: "Test"
output: 
  flexdashboard::flex_dashboard:
  vertical_layout: scroll
logo: logo.jpg
self_contained: no
---
  Overview {data-orientation=rows data-icon="ion-ios-home"}
=====================================  

  Row
-------------------------------------
  ### Plot 1

  ### Plot 2

  Row
-------------------------------------

  ### Plot 3

  ### Plot 4

What I want to do is change the background color of the sections that are seperated by the Row layout.

For example, one section would be gray, the following one white.

Is this possible, and if yes, any hints how I could do it?

Answer 1

Sure you can. Could use classes like colored or check the id's of the sections in the page source (row, row-1, ...) and use those in the CSS styles.

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
  vertical_layout: scroll
self_contained: no
---
  Overview {data-orientation=rows data-icon="ion-ios-home"}
=====================================  

<style>
.colored {
  background-color: #DDDDDD;
}
</style>

  Row { .colored }
-------------------------------------

  ### Plot 1

  ### Plot 2

  Row
-------------------------------------

  ### Plot 3

  ### Plot 4