CODEWITHSUNDEEP
r-markdownflexdashboard
Isobel
Isobel

Reputation: 41

How to add background colours to boxes on Rmarkdown flexdashboard

I would like to colour each box on my flexdashboard a different colour. For example, I would like the background inside box 1 to be blue, the background inside box 2 to be green and so on.

Would anyone be able to advise me on whether this is possible, and if so, how to do this please?

I have attached an example piece of code below.

I cannot use value boxes due to having more than one piece of information to input.

Many thanks, 

title: "Example"
output: 
  flexdashboard::flex_dashboard:
  orientation: columns
  vertical_layout: fill
  ---

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

Column {data-width=450}
-----------------------------------------------------------------------

### Box 1

```{r}
x = 5
y =6 
```

In this example `r x` is smaller than `r y` 


### Box 2

```{r}
x = 5
y =6 
z= 4
```

In this example `r x` is smaller than `r y` but bigger than `r z`

Column {data-width=450}
-----------------------------------------------------------------------

### Box 3

```{r}

```

### Box 4

```{r}

```

Upvotes: 4

Views: 3641

Answers (1)

Martin Schmelzer
Martin Schmelzer

Reputation: 23919

You can use CSS to style all elements of your dashboard. Your boxes are automatically assigned an ID corresponding to their title (usually just lowercase and spaces are replaced by hyphens):

<style>
#box-1 {
  background-color: blue;
  color: white;
}
#box-2 {
  background-color: green;
}

enter image description here

Additionally it is possible to add CSS classes to your boxes like

## Box 1 { .first-box }

Then you can change the styles for this class using

<style>
  .first-box {
    ...
  }
</style>

Upvotes: 7

Related Questions