CODEWITHSUNDEEP
cssrshiny
Jorge Hernández
Jorge Hernández

Reputation: 662

How to change the color of the lines in the tabset on shiny?

Hi and thanks for reading me. Im trying to change the color of this specifically line inside a shiny app, but in not sure of how to do that:

enter image description here

Im using the following code:

ui <- fluidPage(sidebarLayout(
    sidebarPanel(
      selectInput("controller", "Controller", choices = 1:3)
    ),
    mainPanel(
      tabsetPanel(id = "inTabset",
                 
                  tabPanel(
                    div("mytabtitle", style = "color: transparent; background-color: transparent;"), value = "panel1", "Panel 1 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel2", "Panel 2 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel3", "Panel 3 content")
      )
    )
  ))
  
  server <- function(input, output, session) {
  }
  
  shinyApp(ui, server)

Specifically, on this part:

mainPanel(
      tabsetPanel(id = "inTabset",
                 
                  tabPanel(
                    div("mytabtitle", style = "color: transparent; background-color: transparent;"), value = "panel1", "Panel 1 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel2", "Panel 2 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel3", "Panel 3 content")
      )
    )

What tag could I use to change the color of that line? I haven't found anything on the internet so far :(

Upvotes: 0

Views: 238

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

css <- "
/* for the active tab */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  border: 1px solid red;
  border-bottom-color: transparent;
}
/* for the line */
.nav-tabs {
  border-bottom-color: green;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  ......

Upvotes: 2

Related Questions