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?
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>
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>
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.
Related
I am playing around with Quarto and really like it. One feature is to change the color of inline text with the following below syntax (the word chemical will show up in red color)
[chemical]{style="color: red"}
My question is how to change the color of the text if we assign a color to name rather than the color code or built in color code? The below will not work
var="#28A569"
[chemical]{style="color: var"}
Not sure whether Quarto offers a more straightforward approach. But one option would be to use some inline code or following the R Markdown Cookbook use a small custom function.
---
title: "Untitled"
format: html
---
[chemical]{style="color: #28A569"}
```{r, echo=FALSE}
var <- "#28A569"
```
`r sprintf('[chemical]{style="color: %s"}', var)`
```{r}
colorize <- function(x, color) {
sprintf('[%s]{style="color: %s"}', x, color)
}
```
`r colorize("chemical", var)`
An easy option would be to do this using CSS variable.
---
title: CSS variable in Inline Style
format: html
engine: knitr
---
```{css, echo=FALSE}
:root {
--color1: #28A569;
--color2: yellow;
}
```
[chemical]{style="color: var(--color1);"}
[This has colored background]{style="background-color: var(--color1);"}
[This has yellow background]{style="background-color: var(--color2);"}
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?
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
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.
Is there a way to change the font and color in the YAML title in a R markdown flexdashboard?
Here is the code for the YAML header I am trying to change:
---
title: "Greenhouse gases and weather data"
fontsize: 30
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
social: menu
source_code: embed
theme: readable
---
The other option would be to add a CSS code chunk anywhere in the dashboard
```{css}
body > div.navbar.navbar-inverse.navbar-fixed-top > div > div.navbar-header > span.navbar-brand {
font-size: 26px;
color: red;
}
```
as Kat said, the color is set by CSS , therefore you can change the behaviour in the .rmd file itself, or in the underlying theme template .css file.
somewhere located at:
/home/user/R/x86_64-pc-linux-gnu-library/4.0/flexdashboard/rmarkdown/templates/flex_dashboard/resources
add (to the rmd) or look for and change (the .css) to :
<style>
.navbar {
background-color:white;
border-color:blue;
}
.navbar-brand {
color:blue!important;
}
</style>
This will revert the default color scheme of the top navbar
at the moment i dont know a simple YAML - argument solution for this
( but looking into css will gain you much more
versatility along the way, than relying on the YAML options)
I am new to R markdown. My title for the dashboard is big. I want it to appear like this:
Uber data analysis
(NYC, April 2014 - September 2014)
As of now, it comes out in one line like in the image below:
Please let me know how to fix this. Thanks
I don't know why this isn't easier. A way to hack it is to use the author YAML input as the subtitle and use some css to rearrange the title. If you run the following Rmarkdown file, you should see the title now on two lines.
---
title: "Uber data analysis"
author: "(NYC, April 2014 - September 2014)"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
.navbar-brand {
display: grid;
margin: auto;
padding: 5px;
}
.navbar-author {
margin-left: 0px;
}
</style>
```{r setup, include=FALSE}
library(flexdashboard)
```
Highlights
========================================
Column
-----------------------------------------------------------------------
### Chart A
```{r}
```
I have navbar like this.
CSS code is
.navbar {
background-color:yellow;
border-color:black;
}
How I can change that blue thing with tells active page?
EDIT:
I have rmarkdown file and that css-file is myfile.css
---
title: "Title"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
css: mystyle.css
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Plots
=====================================
Column {data-width=650}
-----------------------------------------------------------------------
Column {data-width=350}
-----------------------------------------------------------------------
Table
=====================================
Heatmap
=====================================
The active page probably has a class with "active" or "active-page". If so, you can style the class for example:
.active {
background-color: red;
}