Bookdown contest submission: bookdownThemeEditor: RStudio Addin for easily customizing gitbook themes

Project Link

Introduction

Right now if people wants to customize the look of bookdown::gitbook, they will have to get into the sea of CSS and wish they can find out the correct CSS locator. For example, sometimes the TOC panel is just too wide for me when my TOCs are quite concise while in other cases my short titles are getting just a little too long so it wraps into the second line. In these conditions, I would like to change the width of the TOC panel just by a little. I bet normal people like me will spend at least 30 min on this task. This addin was created to help people solve this kind of common styling need with a peace in mind.

Other than the TOC width problem, it can also help people customize the fonts for Serif and Sans. It also helps people to use google fonts more easily (which requires internet connection). It can also generates codes to adjust line height. Just like some other addins I have created, one key feature of this addin is that it auto-saves users' setting in their home directory so people don't need to type them again and again.

I run out of ideas for this kind of common needs at this moment but I can add more features in the future. I'll appreciate anyone who contribute ideas or even help me code this thing out. :slight_smile:

Key technical details:

This is an RStudio addin that uses shiny to create a UI in RStudio. CSS texts are generated using the glue package and they got wrote into a css file after user clicks the Generate style.css button. Users current setting is saved to ~/.bdTheme as in .dcf format everytime when there is a change inputed.

I got my inspiration from Yihui's comment on this PR: Update style.css to make customizeable by technocrat · Pull Request #630 · rstudio/bookdown · GitHub

5 Likes

Hi

Good idea!

A few suggestions:

  • control of the width used to display the book content in the center region
  • control of border style for table (ie, possibility to add border-left and border-right)
  • control of table background for odd and/or even rows
1 Like

Haha, thanks for your suggestions, @pomchip!

Right now the width of the book contents is sort of controlled by the width of TOC as they are kind of related. Is this what you are looking for?

The ideas of adding support to format tables are interesting. I think it's definitely possible to add a little panel to customize the general look of table without going through kableExtra. :+1:

Hi,

I went about addressing the width issue using the following css

.book .book-body .page-wrapper .page-inner {
  max-width: 80%;
}

As a beginner with rmarkdown and bookdown, it took me a little while to find this (mostly through trial and error and by inspecting the css of rendered html using the developper tools of Chrome and Firefox).
Your approach would be more user friendly, I believe.

1 Like

@pomchip :+1:Thanks for sharing the code! I'll add these features once Yihui finished reviewing all the submissions this time. :wink:

1 Like

It might not be a bad idea to do the same for epub's.

The css is even more finicky for epub's than for gitbook's, especially for Rmd files including tables created with pure html tags (needed when table content mix text, lists, and images). Dealing with border in cells using rowspan and colspan gives me headaches.

1 Like

@pomchip Yeah, I haven't done too many experiments with epub so I didn't even notice there is a stylesheet option over there. :joy: Thanks for bringing it to my attention! Yeah, I feel like it could be a great and interesting addition to this addin in the future!