6

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) 

2 Answers 2

5

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) 
1

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)
2
  • Thanks for your help but I want to set the text color in a navbarPage. You made it a tabsetPanel.
    – stats_guy
    Commented Oct 24, 2018 at 12:36
  • But it's still not in the style of a navbarPage.
    – stats_guy
    Commented Oct 24, 2018 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.