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.

Hi! Can you link an example please? – Sandro Dec 05 '16 at 20:03 — Sandro, Dec 05 '16 at 20:03
Added a link to the gitbook document – Tiernan Dec 05 '16 at 20:18 — Tiernan, Dec 05 '16 at 20:18

Sandro · Accepted Answer · 2016-12-05T21:21:35.790

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.

Embedding in an i-frame may do the trick, but it would detract considerably from the neatness of the entire document. — Tiernan, Dec 05 '16 at 20:53
If possible, I'd like to find a solution that involves adjusting the gitbook style. The package creator mentions that this is possible, but doesn't go into detail. https://bookdown.org/yihui/bookdown/theming.html — Tiernan, Dec 05 '16 at 20:55

score 2 · Answer 2 · answered Dec 07 '16 at 23:34

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.

score 0 · Answer 3 · answered Dec 05 '16 at 22:24

0

@Sandro's suggestion provides the basic framework for the solution.

In the end I added the following to the ./css/style.css file:

.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;
}

and now the buttons are rendering the way I wanted them to.

Note: the !important; tag is necessary, otherwise the gitbook styling will remain.

answered Dec 05 '16 at 22:24

Tiernan

828
8
20

1

well the ´!important´ is necessary if you don't add the additional CSS classes in my answer (this would make the specificity of your rule higher than that of the gitbook one, important does basically the same, but its use is discouraged. – Sandro Dec 06 '16 at 10:10
I know this is an old thread, but +1 for changing the image path to the path within the `_book` folder. In my case, I needed to change `background-image` from `url(images/rulers.png)` to `url("../_book/libs/leaflet-measure-2.1.7/images/rulers.png")` in order to show an image in the `leaflet-measure` button. Although I haven't been able to get other images to show up. – hugh-allan May 04 '22 at 01:00

CSS Customization in a Bookdown Document

3 Answers3

Linked

Related