CODEWITHSUNDEEP
rshinyflexdashboard
jk122
jk122

Reputation: 25

How do I change font color for Flexdashboard valueBox()

I'm creating my first Flexdashboard document, and need to have some value boxes in the dashboard. The boxes turn out fine, but the default font color is white. Does anyone know how/if it is possible to change the default font color within the value boxes?

Upvotes: 1

Views: 1873

Answers (2)

Stibu
Stibu

Reputation: 15897

It's also possible to include the css code directly to the Rmd file as follows:

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

<style type="text/css">
.value-box .value {
    color: black;
}
.value-box .caption {
    color: black;
}
</style>

The second css-block makes sure that also the caption of the value box gets the desired colour, not just the value.

Upvotes: 2

Eli Berkow
Eli Berkow

Reputation: 2725

You can add a css file to the folder that contains your .Rmd file. Add the following few lines to the file:

.value-box .value {
    color: black;
}

I saved it as styles.css

Then add it in here:

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

Obviously you can change black to the colour of your choice.

Alternatively see https://rstudio.github.io/flexdashboard/articles/theme.html

Upvotes: 4

Related Questions