在 R 中修改 Flexdashboard CSS答案

【问题标题】：Modify Flexdashboard CSS in R在 R 中修改 Flexdashboard CSS
【发布时间】：2018-09-22 23:42:59
【问题描述】：

我正在使用带有 Rmarkdown 的 flexdashboard 包，并希望修改标题的尺寸、边框的位置、颜色等，从而生成由 Rstudio 创建的网页。有许多与 flex 仪表板和 Rmarkdown 相关的 CSS 文件。有人可以告诉我应该为此修改哪些 CSS 文件，以及这些文件位于 R 或 Rstudio 目录中的什么位置？

【问题讨论】：

标签： css r flexdashboard

【解决方案1】：

通过修改 flexdashboard 子目录中的 CSS 主题（我们选择修改 Lumen），我和我的同事了解到我们可以控制 flexdashboard 中某些元素的尺寸。

具体来说，我们修改了这个目录中的 CSS 文件： C:\Program Files\R\R-3.4.2\library\flexdashboard\rmarkdown\templates\flex_dashboard\resources

请参阅下面的带注释的 CSS 文件（同样是 Lumen 主题），了解我们如何更改边框的尺寸。显示的编辑位于现有 lumen.css 文件的末尾。

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

【讨论】：

【解决方案2】：

您始终可以通过添加自己的 CSS 文件来修改默认值，说明 here。这样您就不必修改默认规范（以防万一您想使用它们）。

如果您想查看每个主题的默认规范，您可以在 flexdashboard github repo 中找到它们。

【讨论】：