widgetframe in bookdown css problem

[yonicd]

I am trying to use slickR in a bookdown but I am getting the same css problem you talked about in SO, and pointed to a annotated css.style for leaflet in gist. I tried doing something similar and put the style.css in ./css/style.css.

Did I miss anything? where did you put your style.css? could widgetframe solve this?

[bhaskarvk]

That CSS was before I wrote widgetframe, and it's not really an ideal solution. I wrote widgetframe explicitly to solve that issue. But there's an outstanding issue in bookdown https://github.com/rstudio/bookdown/issues/271 and in blogdown https://github.com/rstudio/blogdown/issues/38 that prevents widgetframes from working correctly with bookdown/blogdown.

If you are using iframe in slickR, then the stuff inside your iframe will not be affected by bookdown's CSS anyways regardless whether you use widgetframe or not. But if your content is not in an iframe then you will need to provide your own css like I did in that SO thread. You will also need to have something like below in your _output.yml file

bookdown::gitbook:
  css: ['your-css-file']

[yonicd]

my problem are the dot icons for the slick. they come out tiny because of the bookdown css. an iframe wouldnt solve that.

thanks for the answer.

[bhaskarvk]

Yeah in that case put your css in ./css/style.css and add the following to your _output.yml file.

bookdown::gitbook:
  css: ['css/style.css']

Also don't forget to add ! important to your stuff in the css file so that those rules take precedence over everything else.

[yonicd]

do i need to still add the path prefix to all styles in the css? ie. .book .book-body .page-wrapper .page-inner section.normal

[bhaskarvk]

If you add ! important then you don't need to do that.

[bhaskarvk]

I was not aware of the ! important feature when I rewrote the css in that SO post.

[yonicd]

worked! is there a way to set important on the whole file? ;)

[yonicd]

that would be a better question for Yihui

[bhaskarvk]

AFAIK, there's no way of doing a file wide important in CSS, you've to do it rule per rule.

[yonicd]

some fruit of labor . there are two small things i cant seem to solve. how to make rmarkdown create plot output files without showing putting them in the document and when I try to use synched carousels (a top main slide that shows only one and a bottom slide that is smaller but controls what you see on the top one) bookdown hides the lower one always even though it's in the html tree and is active.

[bhaskarvk]

Are you using widgetframe ? Or just plain iframe ?

[yonicd]

for the help files?