Coloring the navigation sidebar with the movement of the mouse

[prdm0]

Colorful navigation between sections was added in the sidebar of the gitbook format, using stylish key in config. It is possible to enter a valid RGB system color, in hexadecimal notation or an image (local or url), using in stylish the cover_image key. In the case of an image, the median of the color channels is considered. stylish also has a key justify that justifies all the text. An example https://prdm0.github.io/regimento_interno/.

For example, considered use in _output.yml:

Passing a URL:

In this example, the color when placing the mouse in the section names, in the navigation sidebar, will be chosen by the average of the colors of the RGB system channels of the image from the link https://raw.githubusercontent.com/rstudio/bookdown/master/inst/examples/images/cover.jpg. For example, you can choose the color based on the cover of the book.

bookdown::gitbook:
  split_by: section
  css: style.css
  config:
    sharing:
      whatsapp: yes
      all: ['whatsapp']
    stylish:
      cover_image: "https://raw.githubusercontent.com/rstudio/bookdown/master/inst/examples/images/cover.jpg"
      justify: yes

Passing a color in the RGB system

It is also possible to pass a specific color, if you do not want to be guided by the median color of an image. Also note that you may not want to justify the text. So, do justify: no

bookdown::gitbook:
  split_by: section
  css: style.css
  config:
    sharing:
      github: no
      facebook: no
      twitter: no
      whatsapp: yes
      all: ['whatsapp']
    stylish:
      cover_image: "#F79A48"
      justify: yes

I believe that this change is useful and could please a large number of users.

[cderv]

Thanks for your suggestion!

First let me start with some good practice for contribution:

• It would be great if next time you first open an issue for a new feature request so that we can discuss the interest of included it directly inside bookdown.
• Also, please create a branch and do a PR from your feature branch to master. This will allow to have cleaner Pull Request with only commits related to your feature. Currently, there are 26 commits but only the 8 last ones are relevant

About the PR:

Currently, this feature is adding a hard dependency (magick) and I am not sure we want one more hard dependency for an optional feature like this.

Also this is a pretty specific feature. Adding a background color to the head of the sidebar is quite easy with CSS already, and all other customization for style has to be done in CSS directly. This kind of precise customization (getting color from an image) does not feel in the scope of bookdown directly but some helpers function to insert into your Rmd.
However, I understand the interest in easy customization of the style.

Did you already have example of some books out there which would use this feature ? I am trying to see how broad the usage would be for such feature.

Thanks.

[prdm0]

Thanks for your suggestion!

First let me start with some good practice for contribution:

* It would be great if next time you first open an issue for a new feature request so that we can discuss the interest of included it directly inside **bookdown**.

* Also, please create a branch and do a PR from your feature branch to master. This will allow to have cleaner Pull Request with only commits related to your feature. Currently, there are 26 commits but only the 8 last ones are relevant

About the PR:

Currently, this feature is adding a hard dependency (magick) and I am not sure we want one more hard dependency for an optional feature like this.

Also this is a pretty specific feature. Adding a background color to the head of the sidebar is quite easy with CSS already, and all other customization for style has to be done in CSS directly. This kind of precise customization (getting color from an image) does not feel in the scope of bookdown directly but some helpers function to insert into your Rmd.
However, I understand the interest in easy customization of the style.

Did you already have example of some books out there which would use this feature ? I am trying to see how broad the usage would be for such feature.

Thanks.

Hi @cderv,

with respect to dependency, it can be removed only allowing the user of the package to pass a color, that is, removing the possibility of passing an image.

I also believe that, although it is easy to activate some features via CSS, many people in the field of statistics and who need a bookdown to produce their documents arrive, at most, close to _output.yml, not "getting their hands dirty" with CSS. I believe that if this resource were available, it would be used. It is a simple customization that does not change the general shape of the document. I don't have many examples of who uses it, just a biased example from the book I'm writing on computational statistics, https://prdm0.github.io/aulas_computacional/, in Portuguese 😆.

When I see other examples of customizations, these examples greatly modify the current form of the document and modify many elements, that is, they are made by people who "get their hands dirty" with CSS.

Anyway, I understand your positions and that's fine with me. 👍

Thanks.

[prdm0]

First let me start with some good practice for contribution:

• It would be great if next time you first open an issue for a new feature request so that we can discuss the interest of included it directly inside bookdown.
• Also, please create a branch and do a PR from your feature branch to master. This will allow to have cleaner Pull Request with only commits related to your feature. Currently, there are 26 commits but only the 8 last ones are relevant

Thank you very much for the suggestions. It really makes the job of verifying the suggested changes a lot easier.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ cderv
❌ prdm0
_{You have signed the CLA already but the status is still pending? Let us recheck it.}