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.

i'm new in R hence in Shiny, how do you add .nav-tabs?, i mean, i have something like box(width =3,....) which place should i add this? — Rafa Barragan
.nav-tabs isn't actually R code, it's CSS I believe, which I don't understand and can barely mimic. Because it's not R code you don't actually add it to your R file or any of the functions such as box. You have to create a .css file and call it into your application. I'm not sure how to do custom formatting for each box element because I did global changes. Here's a website to help http://shiny.rstudio.com/articles/css.html — stat_student

NicE NicE · Accepted Answer · 2015-08-27T08:26:53

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) {
        }
)

Tab Box CSS for shinydashboard

1 Answers