Can dashboarderHeader color be changed in shiny.semantic / semantic.dashboard ?

Can the color of dashboardHeader be changed easily to a desired non-theme color? For example "firebrickred" ?

library(shiny)
library(semantic.dashboard)
library(ggplot2)
library(plotly)
library(DT)

ui <- dashboardPage(
  dashboardHeader(color = "blue",  #<--- what If I want to make this "firebrickred" ?

title = "Dashboard Demo", inverted = TRUE),
  dashboardSidebar(
    size = "thin", color = "teal",
    sidebarMenu(
      menuItem(tabName = "main", "Main", icon = icon("car")),
      menuItem(tabName = "extra", "Extra", icon = icon("table"))
    )
  ),
  dashboardBody(
    tabItems(
      selected = 1,
      tabItem(
        tabName = "main",
        fluidRow(
          box(
            width = 8,
            title = "Graph 1",
            color = "green",
            ribbon = TRUE,
            title_side = "top right",
            column(
              width = 8,
              plotOutput("boxplot1")
            )
          ),
          box(
            width = 8,
            title = "Graph 2",
            color = "red",
            ribbon = TRUE,
            title_side = "top right",
            column(
              width = 8,
              plotlyOutput("dotplot1")
            )
          )
        )
      ),
      tabItem(
        tabName = "extra",
        fluidRow(
          dataTableOutput("carstable")
        )
      )
    )
  ),
  theme = "cerulean"
)

server <- shinyServer(function(input, output, session) {
  data("mtcars")
  colscale <- c(semantic_palette[["red"]], semantic_palette[["green"]], semantic_palette[["blue"]])
  mtcars$am <- factor(mtcars$am, levels = c(0, 1), labels = c("Automatic", "Manual"))

  output$boxplot1 <- renderPlot({
    ggplot(mtcars, aes(x = am, y = mpg)) +
      geom_boxplot(fill = semantic_palette[["green"]]) +
      xlab("gearbox") +
      ylab("Miles per gallon")
  })

  output$dotplot1 <- renderPlotly({
    ggplotly(
      ggplot(mtcars, aes(wt, mpg)) +
        geom_point(aes(colour = factor(cyl), size = qsec)) +
        scale_colour_manual(values = colscale)
    )
  })

  output$carstable <- renderDataTable(mtcars)
})

shinyApp(ui, server)

I wouldn't say "easily", but you can use css to accomplish what you're looking to do. The css code below will change the color of each part of the header element of the dashboard.

.skin-blue .main-header .logo{
  background-color:#HEXCODE;
}
.skin-blue .main-header .logo:hover{
  background-color:#HEXCODE;
}
.skin-blue .main-header .navbar{
  background-color:#HEXCODE;
}

I like to reference a style sheet when including css in my shiny apps. Do do that, just create a css file in RStudio, store it in your www folder, and reference it in your UI using the following code.

tags$link(rel="stylesheet",type="text/css",href="NAME OF STYLE SHEET"),

Good luck!

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.