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)
Related
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.
I use xaringan to create a presentation (with a footer).
The footer should include the title, and probably also the author of the presentation automatically.
To get the current slide number, I can use %current%, but %title% or %author$ fails. I know I can access the metadata like so in R rmarkdown::metadata$title, but I fail to construct the slideNumberFormat using R. I.e., r cat('<div class = "remark-slide-number-left">', rmarkdown::metadata$title, '</div>') does not work.
Any ideas?
MWE:
---
title: "Minimal Presenation"
author: "The Author"
output:
xaringan::moon_reader:
nature:
slideNumberFormat: '<div class = "remark-slide-number-left"> %title% - %current%</div>'
---
# Hello World
here %title% does not work, the intended output format would be "Minimal Presentation".
The alternative (which also does not work) would be to construct the footer using R similar to this
slideNumberFormat: "`r cat('<div class = \"remark-slide-number-left\">', rmarkdown::metadata$title, ' - %current% </div>')`"
With the help of some non-SO people, I was able to find this answer.
The only drawback is, that it does not construct the footer in one element, but internally constructs two footers... Nonetheless, it allows the reuse of the author and title and other YAML elements.
The css style of the footer can (and should be) written to a css file similar to what #persephone did.
---
title: "Minimal Presentation"
author: "The Author"
output:
xaringan::moon_reader:
css: ["default"]
nature:
slideNumberFormat: "%current%"
---
layout: true
<div style="position: absolute;left:60px;bottom:11px;color:gray;">`r rmarkdown::metadata$author` - `r rmarkdown::metadata$title`</div>
---
# Hello World
First content slide
---
class: inverse, center, middle
# Section Header
---
# Foo Bar
Second content slide
In general, I am not a huge fan of footers in presentations (they are mostly useless IMO/add unnecessary visual cluttering). However, some co-authors prefer to have them in conference presentations.
I also fiddled around with automatization but didn't find a perfect solution without putting much work into it.
Thus, my approach was to leave the slide numbering as is and just hardcode an extra footer with Authors/etc.
Add to a custom .css/style file/tweak to your needs:
div.footer {
background-color: #5c6266;
position: absolute;
bottom: 10px;
left: 0px;
height: 25px;
width: 20%;
}
div.footer span {
font-size: 13pt; /* */
color: #f6f3f2;
position: absolute;
left: 15px;
bottom: 1px;
}
Source it in your YAML:
css: ["default", custom.css"]
Add/Tweak this just before the 1st slide you want to include your footer in (e.g. after your title slide):
---
layout:true
<div class="footer"><span>John Doe et al.</span></div>
---
This is hacky but does not break the slide numbering and was the fastest solution I came up with in my context.
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.
I know how to change R markdown style with a custom css file. However, when the changes are minor, I prefer internal or even inline css, to save trouble from managing two files. I googled and haven't find a solution for this. Below is a simple example of changing style with an external css file. Is there a way to do it with internal or inline css?
The R markdown file:
---
title: "test"
output:
html_document:
css: test.css
---
## Header 1 {#header1}
But how to change style with internal css?
The test.css file:
#header1 {
color: red;
}
Markdown accepts raw HTML and passes it through unaltered, so define your "styled" elements as HTML:
<h2 style="color: red;">Header 1</h2>
Of course, some tools don't actually allow the raw HTML to be passed through (for security reasons or because the final output is not HTML), so your mileage may vary.
Depending on the Markdown implementation you are using, you may be able to define styles in the attribute list (if it supports arbitrary keys):
## Header 1 {style="color: red;"}
However, that is the least likely to work.
And remember, HTML <style> tags do not need to be in the document <head> to work. If you can use raw HTML, you can include a <style> element in the body of your document (as pointed out by #user5219763 in a comment):
---
title: "test"
output:
html_document
---
<style>
#header1 {
color: red;
}
</style>
## Header 1 {#header1}
But how to change style with internal css?
If you don't want to create an external .css file, but would like to define several styles and would rather keep your code less crowded, another possibility is to use a css chunk at the beginning of your R markdown:
---
title: "test"
output: html_document
---
```{css, echo = FALSE}
#header1 {
color: red;
}
```
## Header 1 {#header1}
In the css chunk, you can control multiple styles, as you would do in an external .css file.
Another, sort of hacky option is to specify a css file in the script, then create it in the first chunk.
e.g. the first 18 lines of your .Rmd file:
---
title: "Something Important"
output:
html_document:
css: mystyle.css
---
```{r b, echo=F}
writeLines("td, th { padding : 6px }
th { background-color : coral ;
color : white;
border : 1px solid white; }
td { color : black ;
border : 1px solid skyblue }
h1, h2, h3, h4, h5, p { font-family: consolas; ",
con = "mystyle.css")
```
In the above, I first reference the file mystyle.css in the header block of markdown. Then, I create the file using writeLines(), and save it to the file specified with con = ....
Personally, I think the best option is to just throw your code in between some <script></script> tags if it's a one-off R script.
However, if you do want to create an external file, but don't want to edit a separate file, the above method provides a workaround. It just feels odd.
I have an RMarkdown document outputting to HTML of the same form as the below example. What do I add where to apply unique CSS ids or classes to each plot output?
---
title: "RMarkdown"
author: "Me"
date: "Friday, March 27, 2015"
output:
html_document:
theme: null
css: style.css
---
```{r plot1, echo=FALSE, warning=FALSE, message=FALSE}
library(ggplot2)
x <- ggplot(some_r_code)
print(x)
```
```{r plot2, echo=FALSE, warning=FALSE, message=FALSE}
y <- ggplot(some_more_r_code)
print(y)
```
I've read the info page at http://rmarkdown.rstudio.com/html_document_format.html that went a ways to answering this question but didn't get me there. I have a similar question referencing the material in that page in it's comment section, and would appreciate an answer on either.
Thanks!
You can tell knitr (which is used under the hood) with results="asis" to embed a chunk's output directly into the html. Within the chunk you can use cat to simply write a style tag including your css definitions:
```{r results="asis"}
cat("
<style>
h1 {
color: red;
}
</style>
")
```
See http://yihui.name/knitr/options/#chunk_options for details.
Declaring custom css in RMarkdown
Add css between <style> and </style> tags in the regular body of the RMarkdown (i.e. not in R code area), like so:
<style>
.pad {
padding-top: 200px;
}
</style>
# This heading will be padded {.pad}
Another option is to declare css: "style.css" in yaml and store styles in a separate file (style sheet) in the same directory
Or css can be generated and applied via R code (excellent example here)
Open the resultant HTML in a browser with a Developer Tools option and look at the generated HTML. Then apply you styling to the appropriate tags/classes. For example, put the following into style.css, knit the file and you should see a red border on the plots:
img {
background-color: red;
padding: 2px;
border: 1px solid red;
border-radius: 3px;
margin: 0 5px;
max-width: 100%;
}