16

I found how to change the background color of the User Interface in Shiny. The withdraw I found is that it also colors the background of the tables i'm showing with tableOutput. Here I show a dummy example.

ui.R

shinyUI(pageWithSidebar(
headerPanel("Dummy"),
sidebarPanel( tags$hr() ),

mainPanel(

# This is what I use to change the background color
list(tags$head(tags$style("body {background-color: #ADD8E6; }"))),

tableOutput("dummy")   ) ))

server.R

shinyServer(function(input, output) { output$dummy <- renderTable({ data.frame(A=1:4,B=2:5,C=rep("aaa",4)) }) })

What I get is this

enter image description here

and what I would like to get (I used GIMP to recreate it) is

enter image description here

Thanks everyone for your help!

1 Answer 1

16

A solution has been given on the shiny google group:

runApp(
  list(ui = bootstrapPage(pageWithSidebar(
    headerPanel("Rummy"),
    sidebarPanel( tags$hr() ),

    mainPanel(

      tableOutput("dummy"),
      # change style:    
      tags$head(tags$style("#dummy table {background-color: red; }", media="screen", type="text/css"))
    )

  )
  )

  ,
  server = function(input, output) {
    output$dummy <- renderTable({ data.frame(A=1:4,B=2:5,C=rep("aaa",4)) }) 
  }

  )
)

I also invite you to read this discussion on the shiny google group, which shows how to use the pander package to generate html tables and insert them in a shiny app. This allows a more flexible control of the style.

3
  • 1
    A nice approach, but it fills all the space to the right of the table in red too. Any solution that adapts to the width of the table?
    – Rufo
    Commented Feb 20, 2014 at 11:02
  • 1
    @Rufo Good question. I have not been able to add a style to the table only with jQuery, I don't understand why it doesn't work. Commented Feb 20, 2014 at 11:37
  • 1
    @Rufo I have modified my answer now. Commented Feb 23, 2014 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.