Menu
I would like to customize a shiny application using tabsetPanels so that the selected panel appears in a black background with white text, and the unselected tabs show a white background with black text.
For example, In the application below, when the "Hello" tab is selected, I would like "Hello" to be in white text on a black background. But I still want the background of the panel content (the input field) to remain white.
The closest thing I've been able to find come from this question: Tab Box CSS for shinydashboard
Applying that code yields a colored background all the way across the tabsetPanel, but I still can't find a way to modify this to change the background of only the tabs. Furthermore, nothing I change in the .nav-tabs-custom css seems to take any effect whatsoever.
I'm continually tempted to try applying changes to the tab-pane tag CSS, but that pushes changes into the body of the tab, not the title box.
Any ideas on what I could change to get the title boxes to change background color?
ui <- shinyUI(
fluidPage(
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;
}"),
tabsetPanel(
tabPanel(
title = "Hello",
textInput(inputId = "text", label = "Input")
),
tabPanel(
title = "World"
)
)
)
)
server <- shinyServer(function(input, output, session){
})
shinyApp(ui=ui, server=server)
971
The above example is broken apparently (from version 0.14.0), probably due to a Shiny css change. Additionally the title of the post promises more than the actual question and solution actually covered. So I wrote a new more comprehensive example.
Whether or not all these colors are a good idea from a UI point of view is another question...
Here is the code:
library(shiny)
ui <-shinyUI(fluidPage(
h1("Colored Tabs"),
tags$style(HTML("
.tabbable > .nav > li > a {background-color: aqua; 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: black; color:white}
")),
tabsetPanel(
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)
Here is a screen shot:
And in case this breaks again, and the code has to be adjusted, here is the current css/html that is producing this:
<body>
<div class="container-fluid">
<h1>Colored Tabs</h1>
<style>
.tabbable > .nav > li > a {background-color: aqua; 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: black; color:white}
</style>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-5851-1" data-toggle="tab" data-value="t0">t0</a>
</li>
<li>
<a href="#tab-5851-2" data-toggle="tab" data-value="t1">t1</a>
</li>
<li>
<a href="#tab-5851-3" data-toggle="tab" data-value="t2">t2</a>
</li>
<li>
<a href="#tab-5851-4" data-toggle="tab" data-value="t3">t3</a>
</li>
<li>
<a href="#tab-5851-5" data-toggle="tab" data-value="t4">t4</a>
</li>
<li>
<a href="#tab-5851-6" data-toggle="tab" data-value="t5">t5</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" data-value="t0" id="tab-5851-1">
<h2>normal tab</h2>
</div>
<div class="tab-pane" data-value="t1" id="tab-5851-2">
<h2>red tab</h2>
</div>
<div class="tab-pane" data-value="t2" id="tab-5851-3">
<h2>blue tab</h2>
</div>
<div class="tab-pane" data-value="t3" id="tab-5851-4">
<h2>green tab</h2>
</div>
<div class="tab-pane" data-value="t4" id="tab-5851-5">
<h2>normal tab</h2>
</div>
<div class="tab-pane" data-value="t5" id="tab-5851-6">
<h2>normal tab</h2>
</div>
</div>
</div>
</div>
</body>
EDIT: for shiny versions >= 0.14 see here.
If you select the link with an 'active' class as an immediate descendant of the nav I think you can get what you're after. The UI would look like
ui <- shinyUI(
fluidPage(
tags$style(HTML("
.tabs-above > .nav > li[class=active] > a {
background-color: #000;
color: #FFF;
}")),
tabsetPanel(
tabPanel(
title = "Hello",
textInput(inputId = "text", label = "Input")
),
tabPanel(
title = "World"
)
)
)
)
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
