R shinyDashboard customize box status color

I finally found the answer (long and tough but always gratifying :D)

One of my friend (Thank you so much my friend !!!) shows me how to display all css parameters of each element of a web page (and particularly of a shiny page: go to the appropriate page and right click, something like "examine the element"!!

So AMAZING !!

Then, I look deeper (very very very deeper, there is so much classes !!) and I managed to access to any css parameter of the boxes !

Here is the code for the next people :

library(shiny)library(shinydashboard)ui <- dashboardPage(  dashboardHeader(),  dashboardSidebar(),  dashboardBody(    tags$style(HTML(".box.box-solid.box-primary>.box-header {  color:#fff;  background:#666666                    }.box.box-solid.box-primary{border-bottom-color:#666666;border-left-color:#666666;border-right-color:#666666;border-top-color:#666666;}                                    ")),    fluidRow(      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,          "Box content"      )    )  ))server <- function(input, output) {}shinyApp(ui, server)

Have a good week-end !!

Cheers !

This is brilliant and worked really well for me! I just wanted to add that there is a small bit of code you can add if you want to be able to use the new color with solidHeader = FALSE (to get at Dmitri's question). You need to change the color of the text in the header (I am now using black) and my new 'status' is purple. Here is an example below (where I am replacing the danger status rather than primary):

library(shiny)library(shinydashboard)ui <- dashboardPage(  dashboardHeader(),  dashboardSidebar(),  dashboardBody(    tags$style(HTML(".box.box-solid.box-danger>.box-header {  color:#fff;  background:#9966ff                    }.box.box-solid.box-danger{border-bottom-color:#9966ff;border-left-color:#9966ff;border-right-color:#9966ff;border-top-color:#9966ff;}.box.box-danger>.box-header {  color:#000000;  background:#fff                    }.box.box-danger{border-bottom-color:#9966ff;border-left-color:#9966ff;border-right-color:#9966ff;border-top-color:#9966ff;}                                    ")),    fluidRow(      box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,          "Box content"      )    )  ))server <- function(input, output) {}shinyApp(ui, server)

(I found the right argument for this kind of box by following the OP's instructions to display all the css parameters.)

As I was trying to change the status color for hours now, I think I'd share my solution here, if anyone ever runs into the same problem again.

I was trying to edit the CSS code in a dedicated CSS file but that was not working. But when I added the CSS code directly into the shiny app file via tags$style (like the solutions provided by Charlotte Sirot and Michelle Ross) it worked.

Could have something to do with prioritizing the source of CSS style code, and directly adding the code with tags$style overrides all other sources.