Search code examples
cssrflexdashboard

R flexdashboard tabset styles


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

enter image description here

I want to change the color of the top of the active tab from blue to something else.

enter image description here

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

enter image description here


Solution

  • Try this:

    <style>
      .nav-tabs-custom > .nav-tabs > li.active {border-top-color: green}
    </style>
    

    border top colored green in nav tabs