Background color of tabs in shiny tabPanel
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"
)
)
)
)
Background color in tabsetPanel in Shiny
Use a style
option on the wellPanel
:
runApp(list(
ui = fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
numericInput('n', 'Number of obs', 100)
),
mainPanel( wellPanel(wellPanel(plotOutput("densityPlot", height="500px"))),
wellPanel(style = "background-color: #ffffff;", tabsetPanel(type = "tabs",
tabPanel(h5("Text1"),p("Text" )),
tabPanel(h5("Text2"), p("Text") ),
tabPanel(h5("Text3"), p("Text"))),
br(),br(),br()
))
)
)
,
server = function(input, output) {
output$densityPlot <- renderPlot({ hist(runif(input$n)) })
}
))
How to set color of tabPanel title in navbarPage of a shiny app?
It is not the .tabbable
but the .navbar
element.
To find the element naming open your Shiny app in any browser and inspect the element that you want to adapt. All element names and styles are presented in the inspection pane.
I added some more adaptable elements and weird colors in the example below.
library(shiny)
ui <-shinyUI(bootstrapPage(
"",
navbarPage(
tags$style(HTML("
.navbar-default .navbar-brand {color: cyan;}
.navbar-default .navbar-brand:hover {color: blue;}
.navbar { background-color: gray;}
.navbar-default .navbar-nav > li > a {color:black;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {color: pink;background-color: purple;}
.navbar-default .navbar-nav > li > a:hover {color: black;background-color:yellow;text-decoration:underline;}
.navbar-default .navbar-nav > li > a[data-value='t1'] {color: red;background-color: pink;}
.navbar-default .navbar-nav > li > a[data-value='t2'] {color: blue;background-color: lightblue;}
.navbar-default .navbar-nav > li > a[data-value='t3'] {color: green;background-color: lightgreen;}
")),
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)
Change background color of tabPanel when it is active or hover over in Shiny
Hi you need to tell shiny that the CSS string is HTML with the HTML()
function like my example below. Even better but not necessary is to put it in a head
tag. I also think you had someproblem in your css code. Be careful to always lead all classes with .
library(shiny)
library(shinydashboard)
ui <- function(){
navbarPage(title = 'Hello',
tabPanel("title2"),
tabPanel("title3"),
tags$head(
tags$style(type = 'text/css',
HTML('.navbar { background-color: red;}
.navbar-default .navbar-brand{color: white;}
.tab-panel{ background-color: red; color: white}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
color: #555;
background-color: green;
}')
)
)
)
}
server <- function(input, output, session){
}
shinyApp(ui = ui, server = server)
Hope this helps!
How to change the color of the lines in the tabset on shiny?
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))
),
......
Background color of navlistpanel/tabpanel
We can use css to change the colour of the navigation pills when selected. Place the css tags in the fluidpage
using tags$head
. To have options under a tab panel use navbarMenu
and place the tabPanel
calls with the navbarMenu
call.
With regards to your questions in the comments, you originally set WELL=FALSE
in your navlistPanel
call. If you set it to TRUE
, a box is placed around the navlistPanel
bar. To change the background colour of this, we again make use of CSS, using the .well
property. With this you can change font size, font, font color, background color, maximum width and height of the navlistPanel
and so much more.
What does the syntax mean? Most of it is quite intuitive. I recommend changing some of the values like font-family
to see what's actually going on. Also make use of the css
tag right here on Stackoverflow. You can also learn more about css here.
library(shiny)
library(shinydashboard)
library(shinythemes)
ui <- fluidPage(
tags$head(tags$style(HTML(".nav.nav-pills.nav-stacked > .active > a, .nav.nav-pills.nav-stacked > .active > a:hover {
background-color: #d52b1e;
}
.well {
min-height: 20px;
max-width: 200px;
padding: 19px;
margin-bottom: 20px;
background-color: #2c3e50;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
font-family: 'Rock Salt', cursive;
}
"))),
navlistPanel(well = TRUE,
navbarMenu("Tests",
tabPanel("Test1",
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
)
)
),
tabPanel("Test 2",
"UI elements here")
),
tabPanel("Other",
"UI elements here")
)
)
server <- function(input, output){}
shinyApp(ui, server)
R Shiny Background color changes with each tab
You need to pass the color from R to JS like this:
library(shiny)
ui <- tagList(tags$head(
tags$script("
Shiny.addCustomMessageHandler('background-color', function(color) {
document.body.style.backgroundColor = color;
});
")
),
navbarPage(title = "App Title", id = "navbarID",
tabPanel("Home"),
tabPanel("Tab1"),
tabPanel("Tab2")
))
server <- function(input, output, session) {
observeEvent(input$navbarID, {
if(input$navbarID == "Home"){
session$sendCustomMessage("background-color", "white")
} else {
session$sendCustomMessage("background-color", "lightblue")
}
})
}
shinyApp(ui, server)
Please also see this related article.
Also worth mentioning here is this.
Apply background color for all page, including navigation bar in Shiny
Use this CSS:
library(shinyWidgets)
library(shiny)
css <- "
.navbar-default {
background-color: inherit;
border: none;
}
"
ui <- fluidPage(
tags$head(tags$style(css)),
setBackgroundColor(
color = c("#F7FBFF", "#2171B5"),
gradient = "linear",
direction = c("bottom","left")
),
......
If you don't want to use shinyWidgets::setBackgroundColor
, use this css:
css <- "
body {
min-height: 100%;
width:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
background: -moz-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
background: -webkit-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
background: -ms-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
background: -o-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
background: linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
}
.navbar-default {
background-color: inherit;
border: none;
}
"
Related Topics
How to Make The Body Width Equal to The Device-Width Automatically in CSS3 Media Query
How to Set Margins 0 on Print Preview
How to Inspect CSS Pseudo Classes with Firebug
Input[Type='Text'] CSS Selector Does Not Apply to Default-Type Text Inputs
CSS Background-Position Animate Right to Left
React Routes - Different Styling on Body CSS Tag
Best Practice to Manage All Asset Caching (Images, CSS, Js, Everything)
How to Keep The Width of The Parent Element When Position: Fixed Is Applied
Bootstrap-3 Align Links and Buttons at The Bottom of a Div
How Does 'Flex-Grow:0' Get Interpreted
CSS: Inline Element Stretch to Fill Available Horizontal Space of Container
CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue
How to Make a Text Go onto The Next Line If It Overflows
How to Use Font Awesome in Own CSS
Make Sidebarpanel Autoscroll with Mainpanel in Shiny
CSS Transform on Svg Elements Ie9+