CSS Customization in a Bookdown Document

Question

Bookdown's default styling of the control buttons in leaflet maps is not to my taste and I would like to change it. Specifically, I would like to remove the transparency of the control buttons in the top-right and make sure that the button images are correctly displayed.

What it currently looks like:

What I want:

EDIT 1: A live version of this document can be found here.

After checking out the source, it seems that the css styling responsible for the transparency and missing image is:

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

This comes from the css file in libs/gitbook-2.6.7/css/style.css:9 and libs/gitbook-2.6.7/css/style.css:16.

Two questions on which I'd like some advice:

• What css file should bookdown users edit to customize their book's appearance? [EDIT 2: answer: ./css/style.css]
• What specific css command is needed to stop the image full screen button image from disappearing?

Thanks!

EDIT 2: Following the suggestion provided in this answer, I was able to adjust the background-color of the control buttons. So that solves the transparency issue. I still can't seem to get the full screen button image to show - I've tried setting background-image: initial; but that doesn't change it. Suggestions are welcome.

Answer 1

Your problem is most likely the CSS specificity: https://www.w3.org/TR/CSS2/cascade.html#specificity This means that gitbooks style override those of leaflet because they are more specific.

To fix this you could add a lot of classes to the leaflet CSS file but that would be kinda dirty (an even more dirty fix would be to use !important). I searched a bit and found the following document, the problem is solved by linking the map in an iFrame, would that be a solution for you too? https://bookdown.org/yihui/bookdown/web-pages-and-shiny-apps.html

In the future it will probably be possible to use encapsulation with shadow dom: https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

From your link:

Let’s assume the file is named mathjax-number.html, and it is in the root directory of your book (the directory that contains all your Rmd files). You can insert this file into the HTML head via the in_header option, e.g.,

So you can create a custom CSS file and save it in the root of your book. The way I take it it needs to be a .html file. Because the content seems to be written in the HTML head you need to include style tags: http://www.w3schools.com/tags/tag_style.asp

In the file you can change stuff like .leaflet-bar a to .book .book-body .page-wrapper .page-inner section.normal .leaflet-bar a which will grant a higher specificity. Please bear in mind to update the specificity of the following CSS as well:

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

This is because apparently background: 0 0; overwrites not only the background position but also the background color.

Answer 2

So I took a rather drastic approach, because this problem can happen with other leaflet elements like other controls, legends, attribution. So I essentially copied the entire leaflet.css as bookdownleaflet.css in my book rootdir, and made every element specific to bookdown hierarchy.

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

This could be an overkill, but I thought doing it this way is better because it addresses all elements of a leaflet map in one scoop, and I don't need to debug each and every element that can cause problems.