Modify Flexdashboard CSS in R

问题:

I am using the flexdashboard Package with Rmarkdown and would like to modify the dimensions of headers, location of borders, colors, etc. that result in the webpage created by Rstudio. There are many CSS files associated with flex dashboard and Rmarkdown. Can someone please inform me what CSS files should be modified for this purpose, and where these files are located in the R or Rstudio directories?

回答1:

By modifying a CSS theme (we chose to modify Lumen) in a flexdashboard subdirectory my colleague and I learned we could control the dimensions of certain elements in flexdashboard.

Specifically, we altered the CSS file in this directory: C:\Program Files\R\R-3.4.2\library\flexdashboard\rmarkdown\templates\flex_dashboard\resources

See the annotated CSS file (again, for the Lumen theme) below for how we changed the dimensions of the border boxes. The edits shown were placed at the end of the existing lumen.css file.

/* Jeff's Edits */

.storyboard-nav {
    box-sizing: border-box;
    width: 100% !important; /* This prevents JS transformation on width */
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbnext, .storyboard-nav .sbprev {
    height: auto; /* This overrides the height */
    font-size: 3rem;
}

.storyboard-nav .sbframelist {
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbframelist ul {
    box-sizing: border-box;
    width: 100% !important; /* This prevents JS transformation on width */
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbframelist ul li {
    height: auto; /* This overrides the height */
    width: auto; /* This overrides the width */
}