Tab Box CSS for shinydashboard

Question

I'm trying to change the tab style for tabBox in shinydashboard. I was able to change the background of the tabs that aren't selected, but I can't change the background of the tab that is selected or the text that appears in each tab. This is what I added to a custom.css file to change the unselected tab backgrounds:

.nav-tabs {
  background-color: #006747;
}

I tried stuff like .nav-tabs .active but I couldn't get anything to work.

Also if anybody knows how to change the small colored sliver that appears next to your selected tab, that would be appreciated also.

Answer 1

Developper tools and "inspect element" are very handy to figure out which classes you to change the css from.

To change the sliver and the color of the selected tab, you could do:

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
     background-color: transparent;
     border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
     border-top-color: #FFF;
}

Here's an example (backbone code from here):

library(shiny)
library(shinydashboard)
body <- dashboardBody(
        fluidRow(tags$style(".nav-tabs {
  background-color: #006747;
}

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #FFF;
}"),
                tabBox(
                        title = "First tabBox",
                        # The id lets us use input$tabset1 on the server to find the current tab
                        id = "tabset1", height = "250px",
                        tabPanel("Tab1", "First tab content"),
                        tabPanel("Tab2", "Tab content 2")
                )

))

shinyApp(
        ui = dashboardPage(
                dashboardHeader(title = "tabBoxes"),
                dashboardSidebar(),
                body
        ),
        server = function(input, output) {
        }
)