I have the following code to build a Shinydashboard app. I'm trying to change the background color in the box on the top of my screen to a custom color (a color hex code color), however the options for the argument background only allow for a set of default colors. Is there a way to change the background color of this box specifically while keeping the white background for the remainder of my boxes?

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
                    dashboardHeader(title = 'Dashboard'),
                    dashboardSidebar(sidebarMenu
                                                (menuItem(tabName = 'Panel1', text = 'Panel 1'),
                                                 dateInput("Start_Date", "Start Date", min = '2000-01-01', max = Sys.Date(), value = '2020-01-01',format = "yyyy-mm-dd")
                                                )
                                     ),
                    dashboardBody(
                                  tabItems(tabItem(tabName = 'Panel1',
                                                   fluidRow(box(selectizeInput('select_mean', 'Select Number', 
                                                                               choices = c(12,24,36,48,60,120)),height=80,width=4,
                                                                                background = 'black')),
                                                   fluidRow(box(width = 13, height = 655))
                                                   )
                                           )
                                  )
                    
)


server <- function(input, output) {


}


shinyApp(ui, server)

CodePudding user response：

You can use htmltools::tagQuery to add a style:

library(htmltools)
library(shinydashboard)
library(shiny)

b <- box(selectInput("id", "label", c("a", "b", "c")))
b <- tagQuery(b)$find(".box")$addAttrs(style = "background-color: pink;")$allTags()

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(b)
)

server <- function(input, output, session) {}

shinyApp(ui, server)

CodePudding user response：

You can do the following steps :

1. put your box into a tags$div and give it an ID (here : "toto")
2. add some CSS to the box, which is two div childs after your div toto

You can also put the CSS in a separate file, see https://shiny.rstudio.com/articles/css.html

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
  dashboardHeader(title = 'Dashboard'),
  dashboardSidebar(sidebarMenu
                   (menuItem(tabName = 'Panel1', text = 'Panel 1'),
                     dateInput("Start_Date", "Start Date", min = '2000-01-01', max = Sys.Date(), value = '2020-01-01',format = "yyyy-mm-dd")
                   )
  ),
  dashboardBody(
    
    tags$head(
      tags$style(HTML("
      #toto > div:nth-child(1) > div:nth-child(1) {
        background-color: rgb(128, 0, 0);
      }"))),
    
    tabItems(tabItem(tabName = 'Panel1',
                     fluidRow(
                       tags$div(
                         id = "toto",
                         box(selectizeInput('select_mean', 'Select Number', 
                                                         choices = c(12,24,36,48,60,120)),height=80,width=4)
                       )
                       ),
                     fluidRow(box(width = 13, height = 655))
    )
    )
  )
  
)


server <- function(input, output) {
  
  
}


shinyApp(ui, server)