CODEWITHSUNDEEP
cssrshinyr-markdownflexdashboard
Alexis
Alexis

Reputation: 2266

Bootswatch theme in Shiny Flexdashboard R

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.

Upvotes: 7

Views: 3250

Answers (2)

Waldi
Waldi

Reputation: 41260

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 enter image description here 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")`

enter image description here

Upvotes: 7

Daniel_j_iii
Daniel_j_iii

Reputation: 3252

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.

Upvotes: 1

Related Questions