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, Jun 16 '16 at 21:45
`.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](http://shiny.rstudio.com/articles/css.html) — stat_student, Jun 17 '16 at 14:10

NicE · Accepted Answer · 2015-08-27T08:33:22.587

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

The help desk at my company actually told me the same thing and led me to the same answer so this was a very nice sanity check. — stat_student, Aug 28 '15 at 13:48

Tab Box CSS for shinydashboard

1 Answers1

Linked