How to set color of tabPanel title in navbarPage of a shiny app?

user_3170559 0
Viewed 5066

I want to set the color of the titles of tabPanels in a navbarPage. I tried different approaches but couldn't figure out how to do it. Below is a reproducible example. I also tried other approaches but nothing worked. 

library(shiny) 
ui <-shinyUI(bootstrapPage( 
  "", 

  navbarPage( 
    tags$style(HTML(" 
                  .tabbable > .nav > a  {font-weight: bold; color:black} 
                  .tabbable > .nav > li > a[data-value='t1'] {color:red} 
                  .tabbable > .nav > li > a[data-value='t2'] {color:blue} 
                  .tabbable > .nav > li > a[data-value='t3'] {color:green} 
                  .tabbable > .nav > li[class=active]    > a {color:aqua} 
                  ")), 
    tabPanel("t0",h2("normal tab")), 
    tabPanel("t1",h2("red tab")), 
    tabPanel("t2",h2("blue tab")), 
    tabPanel("t3",h2("green tab")), 
    tabPanel("t4",h2("normal tab")), 
    tabPanel("t5",h2("normal tab")) 
  ) 
  )) 
server <- function(input, output) {} 
shinyApp(ui=ui,server=server)
navbar shiny r css html
2 Answers

It is not the .tabbable but the .navbar element.

To find the element naming open your Shiny app in any browser and inspect the element that you want to adapt. All element names and styles are presented in the inspection pane.

I added some more adaptable elements and weird colors in the example below.

library(shiny) 
ui <-shinyUI(bootstrapPage( 
  "", 

  navbarPage( 
    tags$style(HTML(" 
        .navbar-default .navbar-brand {color: cyan;}
        .navbar-default .navbar-brand:hover {color: blue;}
        .navbar { background-color: gray;}
        .navbar-default .navbar-nav > li > a {color:black;}
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:focus,
        .navbar-default .navbar-nav > .active > a:hover {color: pink;background-color: purple;}
        .navbar-default .navbar-nav > li > a:hover {color: black;background-color:yellow;text-decoration:underline;}
        .navbar-default .navbar-nav > li > a[data-value='t1'] {color: red;background-color: pink;}
        .navbar-default .navbar-nav > li > a[data-value='t2'] {color: blue;background-color: lightblue;}
        .navbar-default .navbar-nav > li > a[data-value='t3'] {color: green;background-color: lightgreen;}
                  ")), 
    tabPanel("t0",h2("normal tab")), 
    tabPanel("t1",h2("red tab")), 
    tabPanel("t2",h2("blue tab")), 
    tabPanel("t3",h2("green tab")), 
    tabPanel("t4",h2("normal tab")), 
    tabPanel("t5",h2("normal tab")) 
  ) 
)) 
server <- function(input, output) {} 
shinyApp(ui=ui,server=server)
user_53598820

have fun:

library(shiny)
ui <-shinyUI(fluidPage(
  h1("Colored Tabs"),
  tags$style(HTML("
                  .tabbable > .nav > li > a                  {font-weight: bold; background-color: pink;  color:black}
                  .tabbable > .nav > li > a[data-value='t1'] {background-color: red;   color:white}
                  .tabbable > .nav > li > a[data-value='t2'] {background-color: blue;  color:white}
                  .tabbable > .nav > li > a[data-value='t3'] {background-color: green; color:white}
                  .tabbable > .nav > li[class=active]    > a {background-color: gold; color:white}
                  ")),
  tabsetPanel(
    tabPanel("t0",h2("normal tab in blue", style ="color : blue"), p("normal tabs are in pink"),
             p("active tab is in gold" , style ="font-weight:bold"),
             p("text is is in gold" , style ="font-weight:bold; color:gold")),
    tabPanel("t1",h2("red tab"), p("active tab is in gold" , style ="font-weight:bold; color:gold")),
    tabPanel("t2",h2("blue tab"), p("active tab is in gold" , style ="font-weight:bold")), 
    tabPanel("t3",h2("green tab"), p("active tab is in gold" , style ="font-weight:bold")),
    tabPanel("t4",h2("normal tab"), p("normal tabs are in pink"), p("active tab is in gold" , style ="font-weight:bold")),
    tabPanel("t5",h2("normal tab"), p("normal tabs are in pink"), p("active tab is in gold" , style ="font-weight:bold"))
  )
  ))
server <- function(input, output) {}
shinyApp(ui=ui,server=server)
user_80578720
Related