0

I want to change the background color of the sidebar of the following shinydashboard app without any luck yet. The CSS selector I'm using only targets a small portion of the sidebar, not all of it;

library(shiny)
library(shinydashboard)

# UI
ui <- dashboardPage(
  dashboardHeader(title = "Simple Shiny Dashboard"),
  dashboardSidebar(
    # Custom CSS to change the background color to red
    tags$head(
      tags$style(
        HTML(".sidebar { background-color: red; }")
      )
    ),
    
    # Sidebar content with input controls
    sidebarMenu(
      menuItem("Home", tabName = "home", icon = icon("home")),
      menuItem("Data Summary", tabName = "data_summary", icon = icon("table"))
    )
  ),
  dashboardBody(
    # Main content
    tabItems(
      # Home tab
      tabItem(tabName = "home",
              h2("Welcome to the Simple Shiny Dashboard!"),
              p("This is a basic example of a Shiny Dashboard."),
              p("Use the sidebar menu to navigate to different sections.")
      ),
      
      # Data Summary tab
      tabItem(tabName = "data_summary",
              h2("Data Summary"),
              # Output to display data summary (replace this with your data summary code)
              verbatimTextOutput("data_summary_output")
      )
    )
  )
)

# Server
server <- function(input, output) {
  # You can add server code here based on your application needs
  
  # Example of data summary output (replace this with your data summary code)
  output$data_summary_output <- renderPrint({
    data_summary <- data.frame(
      Category = c("A", "B", "C"),
      Count = c(20, 30, 15),
      Average = c(10.5, 25.2, 8.7)
    )
    data_summary
  })
}

# Run the app
shinyApp(ui, server)

I'm currently using the CSS browser extension to try to fetch the adequate selector, but none of them seem to work. Knowing the selectors for the header would be pretty useful as well.

M--
  • 25,431
  • 8
  • 61
  • 93
Ekapunk
  • 53
  • 5
  • 1
    Does changing the `HTML()` to `HTML("#sidebarCollapsed { background-color: red; }")` do what you want? – neilfws Aug 07 '23 at 22:52
  • @neilfws Yes! Thank you! Can I ask you how you did it? I want to get the appropiate selector for the header – Ekapunk Aug 07 '23 at 23:22
  • 1
    I just open in a browser, right-click on the desired area, "Inspect", hover over the HTML until the desired area is highlighted, then make a note of the class or ID. The code in the linked answer has an example for the header, it is `.skin-blue .main-header .navbar`. – neilfws Aug 07 '23 at 23:41

0 Answers0