在一個Bookdown文檔中的CSS自定義

小冊子地圖中控制按鈕的預設默認樣式不符合我的口味，我想改變它。具體來說，我想刪除右上角的控制按鈕的透明度，並確保按鈕圖像正確顯示。在一個Bookdown文檔中的CSS自定義

什麼它目前看起來像：

我想要什麼：

編輯1：這篇文檔的在線版本，可以發現here。

檢查出的源之後，似乎負責對透明度和失蹤形象CSS樣式是：

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

這個來自CSS文件中libs/gitbook-2.6.7/css/style.css:9和libs/gitbook-2.6.7/css/style.css:16。關於這一點我想一些建議

兩個問題：

什麼CSS文件應該bookdown用戶編輯自定義他們的書的外觀？ [編輯2：回答：./css/style.css]
需要什麼特定的css命令來停止圖像全屏按鈕圖像消失？

謝謝！

編輯2：繼this answer提供的建議，我是能夠調節控制按鈕的background-color。因此解決了透明度問題。我仍然無法看到全屏按鈕圖像顯示 - 我試過設置background-image: initial;，但這並沒有改變它。歡迎提出建議。

來源

2016-12-05 Tiernan

嗨！你能舉個例子嗎？ – Sandro

添加了gitbook文檔的鏈接 – Tiernan

您的問題很可能是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;覆蓋不僅背景位置，而且背景色。

來源

2016-12-05 20:36:59 Sandro

嵌入到i-框架中可能會起到訣竅，但它會顯着損害整個文檔的整潔。 – Tiernan

如果可能，我想找到一個涉及調整gitbook風格的解決方案。軟件包創建者提到這是可能的，但沒有詳細說明。 https://bookdown.org/yihui/bookdown/theming.html – Tiernan

@桑德羅的建議提供瞭解決方案的基本框架。

最後，我添加了以下到./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樣式將保留。

來源

2016-12-05 22:24:13 Tiernan

如果你不在我的回答中添加額外的CSS類，那麼'！important'是必要的（這將使得你的規則的特異性高於gitbook之一，重要的基本上是一樣的，但它的使用是不鼓勵的。 – Sandro

所以我採取了一個相當激烈的方法，因爲這個問題可能會發生在其他傳單元素，如其他控件，傳說，歸因。所以我基本上將整個leaflet.css作爲bookdownleaflet.css複製到我的書籍rootdir中，並將每個元素都專門用於bookdown層次結構。

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

這可能是矯枉過正，但我認爲做這種方式是更好，因爲它解決了單張地圖中的所有元素在一個瓢，我並不需要每一個元素調試會導致問題。

來源

2016-12-07 23:34:30

在一個Bookdown文檔中的CSS自定義

回答

相關問題