4

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}

```
Isobel
  • 41
  • 1
  • 3

1 Answers1

7

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>
Martin Schmelzer
  • 23,283
  • 6
  • 73
  • 98
  • Just to be clear, this only affects the block itself. Users will likely include visualizations in each box, and the colors of those might need to have their backgrounds changed. – Amit Kohli Feb 07 '22 at 12:52
  • Users will likely include many different types of content in a box and can use CSS to manipulate the styles however they want according to this solution. – Martin Schmelzer Feb 07 '22 at 13:36