Search code examples
cssrshinystylesshinydashboard

How to change the color of Pined controlbar in Shiny Dashboard


Looking for a way to change the color of the pinned controlbar in shinyDashboard. I have been able to change the color of every element in the shinydashboard except for the little pin when you pin the controlbar on the right side of main page. Any Help would be highly appreciated.

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(),
    controlbar = dashboardControlbar(
      id = "controlbar",
      collapsed = FALSE,
      overlay = TRUE, 
      skin = "light",
      pinned = T
    )
  ),
  server = function(input, output, session) {
  }
)

enter image description here


Solution

  • To change the thumb-tack color, you can use

    tags$head(tags$style(type = "text/css", ".fa-thumbtack {color:rgb(255,0,0)  !important;}"))
    

    Full code

    library(shiny)
    library(bs4Dash)
    
    shinyApp(
      ui = dashboardPage(
        header = dashboardHeader(),
        sidebar = dashboardSidebar(),
        body = dashboardBody(
          #tags$style(".fa-thumbtack {color:rgb(255,0,0)}"), ##  this changes only the horizontal pin color
          tags$head(tags$style(type = "text/css", ".fa-thumbtack {color:rgb(255,0,0)  !important;}"))
        ),
        controlbar = dashboardControlbar(
          id = "controlbar",
          collapsed = FALSE,
          overlay = TRUE, 
          skin = "light",
          pinned = T
        )
      ),
      server = function(input, output, session) {
      }
    )