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>
Related
This is a follow-up to this question. Basically, my idea is that I create a dummy table which does not produce any visible output, but produces a caption and a reference to use. I got a semi-working result with this:
---
title: "Example"
format: html
---
This is already something (#tbl-test), but the output does not look nice.
: Another table test {#tbl-test}
------ ------
```{r}
#| label: tbl-iris
#| tbl-cap: Example DT table
DT::datatable(head(iris))
```
The output is not perfect, there is a stub of a table that one could mistake for some kind of an underline, but I get my cross references, captions, list of tables etc. Is there a simple way of making this actual table go away completely? Maybe some css magic?
You can set the display: none to remove the table body.
---
title: "Example"
format: html
---
```{css, echo=FALSE}
div[id^='tbl-test'] thead,
div[id^='tbl-test'] tbody {
display: none;
}
div[id^='tbl-test'] table {
margin-bottom: 0;
}
```
This is something (#tbl-test), and (#tbl-test1) and #tbl-test_anotherone
: Another table test {#tbl-test}
------ ------
```{r}
#| label: tbl-iris
#| tbl-cap: Example DT table
DT::datatable(head(iris))
```
: Another table test-01 {#tbl-test1}
------ ------
: Another table test-anotherone {#tbl-test_anotherone}
------ ------
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 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 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;")
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.