R shiny - background of sidebar panel

Question

Let\'s say, I\'ve got a simple shiny application and I would like to change sidebar panel background. I\'ve tried with css, but I\'ve managed only to change the whole

Answer 1

This has an answer somewhere, if I can find it. (I know because I found the answer when I wanted to change the background color of my sidebars). You can use the tags$style() function to get what you need. I can't remember precisely if you want to color the body or the well, (apparently I did both), but you can play around with it a little until you get your result.

sidebarPanel(
  tags$style(".well {background-color:[your_color];}"),
  ...)

Turns out you want to just change the .well

Answer 2

Try this:

library(shiny)

ui <- shinyUI(fluidPage(
  tags$head(tags$style(
    HTML('
         #sidebar {
            background-color: #dec4de;
        }

        body, label, input, button, select { 
          font-family: "Arial";
        }')
  )),
  titlePanel("Hello Shiny!"),

  sidebarLayout(
    sidebarPanel(id="sidebar",
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),

    mainPanel(
      plotOutput("distPlot")
    )
  )
))

server <- shinyServer(function(input, output) {

  output$distPlot <- renderPlot({
    x    <- faithful[, 2]  # Old Faithful Geyser data
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })

})

shinyApp(ui=ui,server=server)

The sidebar doesn't have any other attributs than 'col-sm-4' when initialized so you can either use jQuery and some logic to figure out which is the propper column to color (so that we only set the background of the sidebar), or you can give a id to the form nested in the column and color the background of this form.