如何更改 rmdformats/readthedown 上的颜色/主题？答案

【问题标题】：How to change the color/theme on rmdformats/readthedown?如何更改 rmdformats/readthedown 上的颜色/主题？
【发布时间】：2017-03-21 18:24:10
【问题描述】：

我正在使用 R 中的 rmdformats 包生成报告，格式为 readthedown。

如何更改默认的整体颜色？

【问题讨论】：

有人可以在这个问题中添加标签#rmdformats吗？

标签： r markdown

【解决方案1】：

rmdformats作者在这里。

要更改标题和其他元素的默认颜色，您必须提供一个自定义 CSS 文件，该文件重新定义定义颜色的默认 CSS 元素。

如果认为以下 CSS 元素就足够了：

#main .nav-pills > li.active > a,
#main .nav-pills > li.active > a:hover,
#main .nav-pills > li.active > a:focus {
    background-color: #22983B;
}

#main .nav-pills > li > a:hover {
    background-color: #22983B;
}

h1, h2, h3, h4, h5, h6, legend {
    color: #22983B;
}

#nav-top span.glyphicon {
    color: #22983B;
}

#table-of-contents header {
    color: #22983B;
}

#table-of-contents h2 {
    background-color: #22983B;
}

#main a {
    background-image: linear-gradient(180deg,#d64a70,#d64a70);
    color: #c7254e;
}

a:hover {
    color: #3d1308;
}

a:visited {
    color: #3d1308;
}

自定义并将其添加到您的Rmd 文件目录中的custom.css 文件中，并在您的序言中添加css: custom.css。

【讨论】：

非常有帮助！如果我想更改侧边栏的背景颜色怎么办？
我需要在侧边栏（顶部或底部）添加一个徽标。是否可以？参考这个问题stackoverflow.com/questions/38333691/…我已经在正文空间添加了徽标，但是如果可以将其插入侧边栏，会更干净
我应该在哪里添加 css: custom.css 在序言中？缩进 rmdformats::material:?
@StevenLockton 它看起来像这样的输出：rmdformats::readthedown: css: custom.css

【解决方案2】：

如果您不想要单独的 .css 文件，您还可以在 Rmd 文件中的样式标签之间添加元素，例如，在块之外，靠近顶部：

<style>
p {
    font-size: 16px;
    line-height: 24px;
    margin: 0px 0px 12px 0px;
}

h1, h2, h3, h4, h5, h6, legend {
    font-family: Arial, sans-serif;
    font-weight: 700;
    color: #9F2042;
}
</style>

【讨论】：

【解决方案3】：

@csmontt

将此添加到 juba 的示例中。此外，检查针织文档将极大地帮助您了解如何针对特定方面。

#table-of-contents {
color:orange;
background: grey !important; 
}

【讨论】：

这是用于 css 文件的，位于顶部，用于此处接受的答案。
请记住添加 # 以识别 CSS 键：#table-of-contents { .. }

【解决方案4】：

我遇到了同样的“问题”。在查看了html页面的源代码后，我发现下面的CSS文件中的以下几项就足够了。特别是左上角框背景颜色是用#content h2 {}自定义的。

#sidebar {
  background: #5A7B9C;
}

#postamble {
  background:#003366;
  border-top:solid 10px #5A7B9C;
}

.title {
  text-align: center;
  color: #003366;
}

.subtitle {
  color: #003366;
}

h1, h2, h3, h4, h5, h6, legend {
  color: #5A7B9C;
}

#content h2 {
    background-color: #003366;
}

【讨论】：

简单而优雅的解决方案，托尼。也谢谢你
在rmdformats 1.0.2 左上角标题的background-color 对我有用的是：#sidebar h2 { ... } 其中#sidebar h2 用sidebar 标识了该部门中的h2身份证。

【解决方案5】：

我有一个同样问题的问题。在这个主题中，readthedown 我想增加页面的宽度，因为我有一个没有使用的巨大的灰色右侧面板。我尝试了类似下面的方法，但它不起作用：

body .main-container {
max-width: 1920px !important;
width: 1920px !important;
}

body {
  max-width: 1920px !important;
}

我成功地减小了宽度但没有增加。使用 goole 检查器，页面大小似乎设置为 809.4px ！

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击进行提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起更多的关注这个问题。