Change color in shinydashboard

Question

I have the following which changes the color of the primary status in shinydashboard to the custom blue I have stated.

tags$style(HTML(\".box.box-solid.box-p         


        

Answer 1

I used the following style() statement at the beginning of the dashboardBody() tag to override every instance where color = "aqua" with your custom blue:

tags$style(
  type = 'text/css', 
  '.bg-aqua {background-color: #005CB9!important; }'
),

The key is the "!important" after the color, which overrides the shinydashboard preset.

In the future, an easy way to identify css classes is to select "run external" in Rstudio when running your shinyapp, then use your browser's developer tools or "inspect element" tools.

Here's the full example for context:

require(shiny)
require(shinydashboard)

ui <- shinyUI(dashboardPage(
  dashboardHeader(title = 'Change infoBox color'),
  dashboardSidebar(disable = TRUE),

  dashboardBody(
    tags$style(
      type = 'text/css', 
      '.bg-aqua {background-color: #005CB9!important; }'
    ),

    infoBox(
      title = 'Custom Color',
      value = 100,
      color = 'aqua'
    )
  )
))

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

})

shinyApp(ui, server)