2

I am using the flex dashboard tool to create a dashboard. The dashboard has a few tabs. I am wondering how I can apply colors to the titles/names/labels of the tabs. Thanks!

The following is the code:

---
title: "A Template of Dashboard with Pages and Tabs"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    social: [ "twitter", "facebook", "menu" ]

---

<style>
body {
  background-color: lightgray;
  color: black; 
}

.nav-tabs-custom > .nav-tabs > li.active {border-top-color: black; }


.tabset { 
  background-color: red;
  border: 10px solid green !important;

}

</style>



## Column {data-width=120}



## Column {data-width=880 .tabset}


### Tab 1



### Tab 2
Matt
  • 7,255
  • 2
  • 12
  • 34
Sam Chang
  • 61
  • 1
  • 5

1 Answers1

4

This can be achieved like so:

---
title: "A Template of Dashboard with Pages and Tabs"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    social: [ "twitter", "facebook", "menu" ]
---

```{css}
/* Set font color of inactive tab to green */
.nav-tabs-custom .nav-tabs > li > a {
  color: green;
} 

/* Set font color of active tab to red */
.nav-tabs-custom .nav-tabs > li.active > a {
  color: red;
} 

/* To set color on hover */
.nav-tabs-custom .nav-tabs > li.active > a:hover {
  color: purple;
}
```


## Column {data-width=120}



## Column {data-width=880 .tabset}


### Tab 1



### Tab 2

enter image description here

stefan
  • 90,330
  • 6
  • 25
  • 51
  • Hi Stefan! Though I have figured it out, I would like to give you a thumb up! – Sam Chang Jun 15 '20 at 22:48
  • Hi @SamChang. Thx. As I was a bit late with my answer I already guessed that you figured it out yourself. But at least your question now has an answer which may be useful for others. Best S. – stefan Jun 16 '20 at 06:33
  • This isn't working for me. Is this in a css chunk in the RMD, or elsewhere? – jzadra Jan 11 '22 at 17:59
  • @jzadra You could add it via a css chunk or put it inside a ` – stefan Jan 11 '22 at 18:14
  • Odd. I've done a barebones attempt and still no luck: https://pastebin.com/36LcEQZG – jzadra Jan 11 '22 at 18:40
  • @jzadra Wrong selectors. :D My css codes sets the color for the tabsets while (as far as I get it from your code) want to set the color of the navbar tabs in the header row. Try with `.navbar-inverse .navbar-nav` instead of `.nav-tabs-custom .nav-tabs` – stefan Jan 11 '22 at 19:16
  • @stefan doh. Thank you! – jzadra Jan 11 '22 at 19:17
  • How can we change that small blue border to another color? Found an answer here https://stackoverflow.com/questions/59602519/r-flexdashboard-tabset-styles – Nip Dec 21 '22 at 01:57