Bookdown 文档中的 CSS 自定义

Question

Bookdown 在传单地图中控制按钮的默认样式不符合我的口味，我想更改它。具体来说，我想去掉右上角控制按钮的透明度，并确保按钮图像正确显示。

目前的样子：

我想要的：

编辑1：可以在here找到该文档的实时版本。

查看源代码后，似乎负责透明度和丢失图像的css样式是：

.book .book-body .page-wrapper .page-inner section.normal a {
    color: #4183c4;
    text-decoration: none;
    background: 0 0;        <-- this line
}

这来自libs/gitbook-2.6.7/css/style.css:9和libs/gitbook-2.6.7/css/style.css:16中的css文件。

我想请教的两个问题：

• bookdown 用户应该编辑哪些 css 文件来自定义其图书的外观？ [编辑 2： 答案：./css/style.css]
• 需要什么特定的 css 命令来阻止图像全屏按钮图像消失？

谢谢！

编辑 2： 按照this answer 中提供的建议，我能够调整控制按钮的background-color。这样就解决了透明度问题。我似乎仍然无法显示全屏按钮图像 - 我尝试设置 background-image: initial; 但这并没有改变它。欢迎提出建议。

Answer 1

您的问题很可能是 CSS 特异性： https://www.w3.org/TR/CSS2/cascade.html#specificity 这意味着 gitbooks 样式会覆盖传单的样式，因为它们更具体。

要解决这个问题，您可以在传单 CSS 文件中添加很多类，但这会有点脏（更脏的解决方法是使用 !important）。 我搜索了一下，找到了以下文档，通过在 iFrame 中链接地图解决了问题，这对您来说也是一个解决方案吗？ https://bookdown.org/yihui/bookdown/web-pages-and-shiny-apps.html

未来可能会使用shadow dom的封装：https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

来自您的链接：

假设文件名为 mathjax-number.html，它位于 你的书的根目录（包含你所有 Rmd 的目录 文件）。您可以通过 in_header 将此文件插入 HTML 头部 选项，例如，

因此，您可以创建自定义 CSS 文件并将其保存在书的根目录中。我认为它需要是一个 .html 文件。 因为内容好像是写在 HTML 头部的，所以需要包含样式标签：http://www.w3schools.com/tags/tag_style.asp

在文件中，您可以将.leaflet-bar a 之类的内容更改为.book .book-body .page-wrapper .page-inner section.normal .leaflet-bar a，这将赋予更高的特异性。 请记住同时更新以下 CSS 的特殊性：

.leaflet-bar a, .leaflet-bar a:hover {
    background-color: #fff;
}

这是因为background: 0 0; 显然不仅覆盖了背景位置，还覆盖了背景颜色。

Answer 2

所以我采取了一种相当激进的方法，因为这个问题可能发生在其他传单元素上，例如其他控件、图例、属性。 所以我基本上将整个 Leaflet.css 复制为 bookdownleaflet.css 到我的书根目录中，并使每个元素都特定于 bookdown 层次结构。

https://gist.github.com/bhaskarvk/acc14421598d76f65da6a2c153a07865

这可能有点矫枉过正，但我​​认为这样做会更好，因为它可以一次性解决传单地图的所有元素，而且我不需要调试可能导致问题的每一个元素。

Answer 3

@Sandro 的建议提供了解决方案的基本框架。

最后我在./css/style.css 文件中添加了以下内容：

.leaflet-top .leaflet-control {
    margin-top: 10px;
    background-color: white !important;
}

.leaflet-control-fullscreen-button .leaflet-bar-part {
        background-image: url("../_book/libs/fullscreen-1.0.1/fullscreen.png") !important;
}

现在按钮正在按照我想要的方式呈现。

注意：!important; 标签是必须的，否则 gitbook 样式会保留。