Modify Flexdashboard CSS in R

Question

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?

score 6 · Accepted Answer · answered Apr 26 '18 at 15:32

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 */
}

score 5 · Answer 2 · edited Aug 10 '23 at 20:04

You can always modify the defaults by adding your own CSS file, instructions here. This way you don't have to modify the default specifications (in case you ever want to use them).

If you want to check the default specifications for each theme, you can find them in the flexdashboard github repo.

Update 2023-08-10

The reference location for the CSS files for flexdashboard included with RMarkdown have moved. They are now here.

Modify Flexdashboard CSS in R

2 Answers2

Update 2023-08-10

Linked