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文件。

我想要一些建议的两个问题：

• 哪些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

将来可能会使用带阴影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复制为我的书籍rootdir中的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样式将保留。