Change font size for individual text section in fl

Question

I'm using flexdashboard to create reports and I want to change a font size only for one part of the page.

It feels to me that I can do it by adding CSS class, but I can't find how can I specify class name in R markdown code.

Any ideas?

Answer 1

Flexdashboard automatically add an id with the same name as the section title to that section. For example if you have a section "my plot", the id for that section will be "my-plot". You can add section-specific css as following

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
theme: readable
orientation: columns
vertical_layout: fill
---

Row
-----------------------------------------------------------------------
### my plot
plot1

### my plot2
plot2

<style type="text/css">
#my-plot .chart-title{
  font-size: 20px;
}
<style type="text/css">

In the above example, only the font size of the plot 1 will be changed.

Answer 2

You can add CSS directly into your Rmarkdown document. For example, if you wanted to change the font of objects with class "chart-title" you could insert the following into your R markdown file:

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
theme: readable
orientation: columns
vertical_layout: fill
---

<style type="text/css">

.chart-title {  /* chart_title  */
   font-size: 30px;
   font-family: Algerian;

</style>