I have the following RMarkdown FlexDashboard document:
---
title: "Some title"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Some chart
```{r}
plot(faithful)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart 2
```{r}
```
### Chart 3
```{r}
```
How can I put the footer that span across the page with the following content?
tags$div( HTML("<footer><small>© Copyright 2017, MyCompany Co.,Ltd</small></footer>"))
You can put the HTML of your footer in a footer.html file and include it after the body of your flexdashboard using after_body in your markdown:
---
title: "Some title"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
includes:
after_body: footer.html
---
You can try this:
tags$footer( HTML("<footer><small><b>© Manoj Kumar 2021.</b></small></footer>"), align="left", style="position:absolute; bottom:0; width:95%; height:50px; color: #000000; padding: 0px; background-color: transparent; z-index: 1000;")
Related
I want to change the apperance of my dropdown tabset in R Markdown. For example, I want my dropdown to expand on hover and change the overall apperance of the box. Furthermore I want to change font, color, and text-alignment within the dropdown. I have tried a lot of different methods in my .css file without any success. See code and picture below.
This is the dropdown I want to customize
---
output:
html_document:
theme: paper
highlight: tango
number_sections: false
toc: false
toc_float: false
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Title {.tabset .tabset-fade .tabset-pills}
### Subject1 {.tabset .tabset-dropdown}
#### How can i customize this?
#### How can i customize this?
### Subject2 {.tabset .tabset-dropdown}
#### How can i customize this?
#### How can i customize this?
You need to add styles.css in your r code at the top, and also as a new file in your folder.
R Code
---
output:
html_document:
theme: paper
highlight: tango
number_sections: false
toc: false
toc_float: false
css: styles.css
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Title {.tabset .tabset-fade .tabset-pills}
### Subject1 {.tabset .tabset-dropdown}
#### How can i customize this?
#### How can i customize this?
### Subject2 {.tabset .tabset-dropdown}
#### How can i customize this?
#### How can i customize this?
CSS code (styles.css):
.nav-tabs > li.active:nth-child(1) > a {
background-color: #E8C120;
}
.nav-tabs > li > a {
background-color: #5882A6;
color: red;
}
OUTPUT:
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;
}
I am trying to modify some of the styles with CSS for a tabset in flexdashboard. Here's an example of an RMarkdown file.
---
title: "Title"
output:
flexdashboard::flex_dashboard
---
Section
===========================================================
Column {.tabset .tabset-fade}
-----------------------------------------------------------------------
### tab1
text1
### tab2
text2
I want to change the color of the top of the active tab from blue to something else.
The closest I can get is changing the color of all tabs and not the top.
---
title: "Title"
output:
flexdashboard::flex_dashboard
---
<style>
.tabset {
background-color: #00806E;
}
</style>
Section
===========================================================
Column {.tabset .tabset-fade}
-----------------------------------------------------------------------
### tab1
text1
### tab2
text2
Try this:
<style>
.nav-tabs-custom > .nav-tabs > li.active {border-top-color: green}
</style>
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.