Change color of infoBox

[GregRousell]

I'm trying to customise the look of an app however color = "red" isn't working in my Shiny app. I can change the background color of all infoBoxes using css, however I want each box to have a different color. When I run the app it's still basic black on white. I've tried multiple colors and nothing changes. Any help is appreciated.

Here's my reprex:

library(shinydashboard)
library(shiny)

my_value <- 12

ui <- fluidPage(
  
  fluidRow (
    HTML("<h3><center>Here is my App</center></h3>")
    ),
  fluidRow(
    infoBoxOutput("my_value", width = 3)
  )
  )


# Server ------------------------------------------------------------------

server <- function(input, output) {
  output$my_value <- renderInfoBox({
    infoBox(title = HTML("My Value<br>"),
             value = HTML("<p style='font-size:45px'>",
                          my_value,"</p>"),
            color = "red",
            fill = TRUE
             )
    }
    )
  
}

# Run the application
shinyApp(ui = ui, server = server)

[williaml]

You're using the shinydashboard boxes outside of shinydashboard (you are using a fluid page), so you'll need shinywidgets.

See edited code below and link.

library(shinydashboard)
library(shiny)
library(shinyWidgets) # needed if using shinydashboard items outside of shinydashboard

my_value <- 12

ui <- fluidPage(
  
  useShinydashboard(), # added this
  
  fluidRow (
    HTML("<h3><center>Here is my App</center></h3>")
  ),
  fluidRow(
    infoBoxOutput("my_value", width = 3)
  )
)


# Server ------------------------------------------------------------------

server <- function(input, output) {
  output$my_value <- renderInfoBox({
    infoBox(title = HTML("My Value<br>"),
            value = HTML("<p style='font-size:45px'>",
                         my_value,"</p>"),
            color = "red",
            fill = TRUE
    )
  }
  )
  
}

# Run the application
shinyApp(ui = ui, server = server)

Use 'shinydashboard' in 'shiny' — useShinydashboard