8

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?

zx8754
  • 52,746
  • 12
  • 114
  • 209
kismsu
  • 1,049
  • 7
  • 22

3 Answers3

4

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>
iantist
  • 833
  • 2
  • 12
  • 27
  • This will work only if the document has the class 'chart-title'. What if I want to assign class to a one of the text outputs? – kismsu Oct 11 '16 at 14:34
  • 1
    The above example will style all elements with "chart-title" as the class attribute, you can inspect your own dashboard in the browser to learn the name, id, or class of the element you'd like to style. – iantist Oct 11 '16 at 15:54
  • But this will be for all elements with this class. I want to change just one of them. – kismsu Oct 12 '16 at 08:07
  • you can use html in your markdown document to add text with a specific class that you can style as I showed in my answer. for example:

    Note that this is an important paragraph

     – iantist Oct 13 '16 at 13:00
3

you can do something like this on individual items:

Column {data-width=400}
-----------------------------------------------------------------------

### <b><font face="Georgia" size="2em" color="#000000">Chart B</font></b>
Manoj Kumar
  • 5,273
  • 1
  • 26
  • 33
-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.

Yishan
  • 1
  • 1