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 background. Can you help me?

My ui.R:

    library(shiny)

    shinyUI(fluidPage(
      includeCSS("www/moj_styl.css"),

      titlePanel("Hello Shiny!"),

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

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

and my server.R:

    library(shiny)

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

    })

and moj_styl.css:

    body {
        background-color: #dec4de;
    }

    body, label, input, button, select { 
      font-family: 'Arial';
    }

Answer 1

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.

Answer 2

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