css - R shinyDashboard customize box status color

Question

I would like to customize the color of the box status of my shiny app. I find a css way to change the box background color of these box but not to customize the status color, but I do not see the equivalent argument of "status" in css? I thus print the source code of a simple page containing the considered argument "status" and I was lookin at its class (I think class="box box-solid box-primary") but I do not manage to reach it in the several .css provided in this webpage... :(

Do you have an idea ?

Here is this simple code :

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
          "Box content"
      )
    )
    )
    )


server <- function(input, output) {}

shinyApp(ui, server)

Thank you in advance for any help !

Cha

Answer 1

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 !

Answer 2

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.)

Answer 3

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.

Answer 4

I'm just building from @Michelle Ross and @Charlotte Sirot excellent answers and hoping that someone else also will benefit from this variation: I wanted to customize different colors for different statuses, here I chose "danger" and "info". I also wanted the box content background to be filled with color. To acheive that I used the following code:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


.box.box-solid.box-danger>.box-header {
  color:#9966ff;
  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:#fff; 
  background:#9966ff
                    }

.box.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
background: #9966FF;
}

.box.box-solid.box-info>.box-header {
  color:#000000;
  background:#FFAE66
                    }

.box.box-solid.box-info{
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
}

.box.box-info>.box-header {
  color:#fff; 
  background:#FFAE66
                    }

.box.box-info{
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
background: #FFAE66;
}

                                    ")),
    fluidRow(
      box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
          "Box content"
      ),
      box(width = 6, title = "Hanna", status = "info", solidHeader = F,
          "blabla")
    )
  )
)


server <- function(input, output) {}

shinyApp(ui, server)

And generated a shinydashboard with boxes like this: