CODEWITHSUNDEEP
rshinyshinydashboard
Tanga94
Tanga94

Reputation: 837

How to customise background colors in shinydashoard

I have the following webapp in R (Shiny). I'm trying to change the background color of the header, however the background color in the title corner remains as the default. Is there a way to fix this?

Also, what is the best way to go about changing the background colors of the sidebar and selectizeInput boxes to custom colors as well?

ibrary(shiny)
library(shinydashboard)


ui <- dashboardPage(
                    dashboardHeader(title = 'Hello'),
                    dashboardSidebar(sidebarMenu
                                                (menuItem(tabName = 'Panel1', text = ' Growth Heatmap'),
                                                 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('.skin-blue .main-header .navbar {background-color: #22313f;}'))),
                                  tabItems(tabItem(tabName = 'Panel1',
                                                   fluidRow(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)

enter image description here

Upvotes: 0

Views: 77

Answers (1)

Yousuf Ali
Yousuf Ali

Reputation: 48

   .skin-blue .main-header .logo {
    background-color: black;
    color: white;
    border-bottom: 0 solid transparent;
}
   .skin-blue .main-header .logo:hover {
    background-color: black;
  }

adding this to css file should change the header logo background color to black and text white.
Here is the link for css file see line (1-139) for blue skin- shinydashboard_blue_skin
I think you have to play around little bit with color (search sidebar in the above css file and you will find where to change)

Upvotes: 1

Related Questions