R shinyDashboard customize box status color

Charlotte Sirot picture Charlotte Sirot · Mar 18, 2016 · Viewed 12.4k times · Source

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

Charlotte Sirot picture Charlotte Sirot · Mar 18, 2016

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 !