Bookdown theme queries

I posted on Stackoverflow a couple of questions related to theming bookdown projects. There have been no responses so I hope that, as I continue to struggle with these questions, I may post the queries here (potentially in the hope of reaching the bookdown author).

I would like to do two things:

(1) Remove the theme icon that appears in the toolbar (so that a user cannot change the theme).

(2) Create a new theme based on the standard white theme, or modify the standard white theme (I don't want to do a great deal: just a few changes to help the book/manual I have developed fit within the theme of the new website we are developing (I work for a wildlife conservation charity).

I have been unable to find information on (1) in the bookdown documentation or elsewhere, and, although there is a little information on css in the bookdown documentation, and I have looked at style.css, I haven't been able to figure out what I need to resolve (2).

With grateful thanks.

How are you familiar to css ? You should be able to customize using css only.

Did you know there was a bookdown contest ? You'll find a lot of examples !! No better documentation than other examples!
You should definitely give it a look to find some idea and see how everyone has done customization

https://forum.posit.co/tags/bookdown-contest

Thank you for your reply! I will look at the contest examples for ideas and inspiration.

I have a basic understanding of how css works, and I am doing some more study, so i should be able to manage. However, I am confused by the bookdown style.css file. The code is on two very long lines without breaks, with some other commented text in between. I have been able to format it, sort of, but I am struggling to understand why there are these two sections, and to format it so that the structure is clear.

In addition, there are five other css files (plugin-bookdown.css, plugin-fontsettings.css, plugin-highlight.csss, plugin-search.csss, plugin-table.css).

Should I be modifying these files, or style.css?

Should I perhaps not be modifying any of the css files at all but rather simply writing my own css file that contains instructions only for those parts of the bookdown css that I wish to change?

I anybody can shed any light on these matters for me so that I can move forward, I would be grateful!

Yes I think you should do that. With CSS, only the last rules is active for a selector. So if you provide your own, it will change the default one.
See bookdown book for info:

If you do not like any of these Bootstrap styles, you can set theme to null , and apply your own CSS through the css or includes option.

This are the arguments of rmarkdown::html_document - so this is the same as rmardown.

Understanding how bookdown works will allow you to really to full customisation. The examples of the contest are the best to learn how.

That is very helpful thank you. So, if I have understood correctly, in the _output.yaml file I should have

bookdown::gitbook:
css: my_styles.css

and then my_styles.css could have, for example:

.book .book-header h1 {
opacity: 1;
text-align: left;
color: #00a851;
}

I copied this from somewhere (r4ds I think).

But there are six css with bookdown and it is unclear to me which css items in which file apply to which style elements. I am using the bookdown reference you kindly provided but it does not cover this topic. Do you know if the bookdown css files are documented anywhere (I feel that looking into them is like looking into a fog)?

And one last question, sorry: I cannot find in any documentation an indication of how to remove the 'A' icon from the gitbook toolbar so that a user cannot chose between themes. Any idea?

Thanks!

You should not rezd the css file. You should look at the webpage in developer mode (F12 on Firefox) or use a tool like Selector Gadget to find the Selector for the elements you want to modify and try to change css rules for theme and eventually.

Everything you put in your custom css will override one of bookdown or bootstrap if it exists.

This is also the way to for example hide the A button with a css rule. Not the perfect solution but it will work.
However I think you can deactivzte it using an option fontsetting
3.1 HTML | bookdown: Authoring Books and Technical Documents with R Markdown

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.