在 R 中修改 Flexdashboard CSS

Question

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

Answer 1

通过修改子目录中的 CSS 主题（我们选择修改Lumen），flexdashboard我和我的同事了解到我们可以控制 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 */
}

Answer 2

您始终可以通过添加自己的 CSS 文件来修改默认值，说明请参见此处。这样您就不必修改默认规范（如果您想使用它们）。

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

更新2023-08-10

RMarkdown 中包含的CSS 文件的参考位置flexdashboard已移动。他们现在就在这里。