Bookdown 문서의 CSS 사용자 정의

Question

Bookdown의 리플릿 맵에서 제어 버튼의 기본 스타일은 내 취향이 아니므로 변경하고 싶습니다. 특히, 나는 오른쪽 상단에있는 컨트롤 버튼의 투명도를 제거하고 버튼 이미지가 올바르게 표시되는지 확인하려고합니다.

내가 원하는 무엇 :

편집 1 :이 문서의 라이브 버전 here을 찾을 수 있습니다을

는 현재처럼 보이는 무엇. 이 libs/gitbook-2.6.7/css/style.css:9 및 libs/gitbook-2.6.7/css/style.css:16에 CSS 파일에서 제공

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

:

소스를 확인해 본 결과, 투명성에 대한 책임을 누락 이미지 CSS 스타일이 보인다. 나는 몇 가지 조언을하고자하는

두 질문 :

자신의 책의 모양을 사용자 정의 사용자 편집을 bookdown해야합니까 CSS 파일

• ? [EDIT 2 : 대답 : ./css/style.css]
• 이미지 전체 화면 버튼 이미지가 사라지지 않도록하려면 어떤 특정 CSS 명령이 필요합니까?

감사합니다. EDIT 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://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

: 앞으로 https://bookdown.org/yihui/bookdown/web-pages-and-shiny-apps.html

아마 그림자 DOM과 캡슐화를 사용하는 것이 가능할 것이다 mathjax-number.html 이름

이의 파일을 가정 해 보자하고 책의 루트 디렉토리 에 있습니다 (모든 Rmd 파일이 들어있는 디렉토리). 이 파일을 in_header 옵션을 통해 HTML 헤드에 삽입 할 수 있습니다 (예 :,

그래서 맞춤 CSS 파일을 만들어 책의 루트에 저장할 수 있습니다. 내가 가져가는 방법은 .html 파일이어야합니다. 더 높은 특이성을 부여합니다 .book .book-body .page-wrapper .page-inner section.normal .leaflet-bar a에 .leaflet-bar a 같은 물건을 변경할 수있는 파일에서 http://www.w3schools.com/tags/tag_style.asp

: 콘텐츠는 스타일 태그를 포함하는 데 필요한 HTML 헤드에 기록 될 것으로 보인다 때문입니다. 뿐만 아니라 다음과 같은 CSS의 특이성을 업데이트 명심하십시오 : 분명히 background: 0 0;는 배경 위치뿐만 아니라 배경 색상뿐만 아니라 덮어 쓰기 때문에

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

이입니다.

Answer 2

@ Sandro의 제안은 솔루션의 기본 프레임 워크를 제공합니다.

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

지금은 버튼을 내가 그들가 원하는 방식으로 렌더링됩니다 결국

나는하여 ./css/style.css 파일에 다음을 추가했다.

참고 :!important; 태그가 필요합니다. 그렇지 않으면 gitbook 스타일이 유지됩니다.

Answer 3

다른 컨트롤, 범례, 속성과 같은 다른 전단 요소에서이 문제가 발생할 수 있으므로 다소 과감한 접근 방식을 취했습니다. 그래서 본질적으로 bookletleaflet.css로 전체 booklet.css를 내 책 rootdir에 복사하고 모든 요소를 ​​bookdown 계층 구조에 맞게 만들었습니다.

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

이 잔인한 될 수 있지만, 나는 그것이 하나의 특종에 전단지지도의 모든 요소를 ​​해결하기 때문에이 방법은 더 나은 일을 생각 나는 각각의 모든 요소를 ​​디버깅 할 필요가 없습니다 문제를 일으킬 수 있습니다.