Bootswatch theme in Shiny Flexdashboard R

Question

I downloaded a css from bootswatch (https://bootswatch.com) and I saved the file (bootstrap.css) where my flexdashboard file is. So I tried to load the css with this code:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: bootstrap.css
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

But the css doesn't load. I would like to use "Mint" theme from Bootswatch. Please, do you know a solution for this issue? Any help provided will be greatly appreciated.

I don't believe you have the .css file in the right location, it needs to be in the same directory as your flexdashboard if you are going to use it in this code example — Daniel_j_iii, Jul 15 '20 at 01:23
Hello @DanielJachetta, yes it's in the same directory, I even checked it to make it the working directory. — Alexis, Jul 15 '20 at 01:25

Waldi · Accepted Answer · 2020-07-20T13:11:59.653

7

I downloaded the Minty theme from Bootswatch.

My first observation is that the :root css isn't in a format recognized by RStudio/flexdashboard : missing R_BRACE As this :root section mainly defines color names, I removed it because colors are in further sections defined directly by their #HEX code. After this, the css file seems valid, with only warnings.

Then I compared this css file with the default flexdashboard css files.
For example : theme-bootstrap.css

The main difference I saw is that flexdashboard uses custom tags which you don't find in the bootstrap.css because it's aimed at HTML formatting, and not specifically at flexdashboard formatting.

Examples of flexdashboard specific tags :
-.section.sidebar
-.value-box
-.chart-title
-...

This is the reason why you don't see any change : the css file is loaded correctly, but unfortunately most of its HTML tags don't apply to flexdashboard.

As explained in css styles, the navigation bar for flexdashboard uses the navbar-inverse class for each of its themes, so if you want to create your own Theme, you'll have to modify this.

To check this, create a very simple style.css:

.navbar-inverse {
  background-color: #fd7e14;
  border-color: #1967be;
}

.chart-title {
    font-size: 50px;
    color: #fd7e14;
}

Now you can use this custom css in the following Markdown file:

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    css: style.css
---

Column {data-width=650}
-----------------------------------------------------------------------

### My Gauge

`r flexdashboard::gauge(15, min = 0, max = 50, href="#details")`

edited Jul 20 '20 at 13:11

answered Jul 20 '20 at 05:16

Waldi

39,242
6
30
78

1

Hello @Waldi, that's a complete, well tested answer!. Then it seems that folks at RStudio can clarify that even when using a similar palette like Cerulean from Bootswatch, it's not easy to import directly. Just a question, if I import a css, does it override the base css used in flexdashboard? Or only in the tags defined? – Alexis Jul 20 '20 at 13:06
2

You can still set the theme you prefer, for example Cerulean, and add to it a css file which will only modify the Tags you changed, or the Tags depending on the Tags you changed. As described above, `navbar-inverse` is the base class for many other tags, so if you modify it you'll see other Tags change. – Waldi Jul 20 '20 at 13:31
1

Great!, please, could I ask a last question? How did you get the `missing R_BRACE` message? Did you open the css file in RStudio? – Alexis Jul 20 '20 at 13:43
2

Yes, when I open the Minty css in RStudio, I get those red crosses on the left, and when I click on them I get the missing R_BRACE error – Waldi Jul 20 '20 at 13:45
1

Interesting what RStudio can do, so it seems by opening css files!. Thank you very much @Waldi, I appreciate your time and effort for this answer, hope it helps another members of the community if the ever have to load a bootswatch file. – Alexis Jul 20 '20 at 13:50
1

I was looking for this, good answer, but I was left wondering how to use with `runtime: shiny`. Greetings. – Wolkuz Aug 09 '21 at 16:12
1

I tried to edit the previous comment, but it is not possible: So I saved the original "Cerulean" theme and modified it according to the .css I have, now I put in the YAML Header, `theme: cerulean` and it works with Shiny and Flexdashboard. – Wolkuz Aug 09 '21 at 16:38

score 1 · Answer 2 · answered Jul 15 '20 at 01:46

1

In the mean time, you can use the theme: yaml header or other similar flexdashboard themes like yeti, journal, spacelab

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    theme: lumen
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

Which give you a few preset themes, and then you can fine tune the .css. but I had the same issue you did, I had the .css in the same directory, but no style was added, we must be doing something wrong, but the themes will atleast give you the ability to use a handful of different colors in the mean time.

answered Jul 15 '20 at 01:46

Daniel_j_iii

3,041
2
11
27

Hello @Daniel Jachetta, I've been using the themes "Cerulean" and "Cosmo" but I want to load my own css, that's the reason of my question. If you can guide me with how to load that css, I will appreciate it. Thank you. – Alexis Jul 15 '20 at 01:57
that's going to depend on your .css file. CSS is very broad but powerful – Daniel_j_iii Jul 15 '20 at 02:02
1

@Alexis Modify a theme that is already integrated in Flexdashboard and then place it in the YAML Header, it is working for me with Shiny so far. Greetings. – Wolkuz Aug 09 '21 at 16:40

Bootswatch theme in Shiny Flexdashboard R

2 Answers2

Linked