Come cambiare colore nel cruscotto lucido?

Question

(cross post da gruppi google lucidi)

Qualcuno potrebbe indicarmi i nomi dei tag che devo modificare il colore di un cruscotto lucido?

modificati rispetto http://rstudio.github.io/shinydashboard/appearance.html#long-titles questo cambierà l'angolo in alto a sinistra del mio cruscotto all'arancione

tags$head(tags$style(HTML(' 
     .skin-blue .main-header .logo { 
           background-color: #f4b943; 
           } 
           .skin-blue .main-header .logo:hover { 
           background-color: #f4b943; 
           } 
           '))) 

Non è chiaro per me come cambiare il resto della intestazione e barra laterale per arancione, e come posso cambiare il colore quando una voce sul "SideBarMenu" è selezionata/evidenziata.

Answer 1

Secondo l'esempio che hai postato un link al si può provare:

ui.R

dashboardPage(
       dashboardHeader(
         title = "Example of a long title that needs more space", 
         titleWidth = 450 
       ), 
       dashboardSidebar(sidebarMenu(
         menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")), 
         menuItem("Widgets", icon = icon("th"), tabName = "widgets", 
           badgeLabel = "new", badgeColor = "green") 
       )), 
       dashboardBody(
         # Also add some custom CSS to make the title background area the same 
         # color as the rest of the header. 
         tags$head(tags$style(HTML(' 
     /* logo */ 
     .skin-blue .main-header .logo { 
           background-color: #f4b943; 
           } 

     /* logo when hovered */ 
     .skin-blue .main-header .logo:hover { 
           background-color: #f4b943; 
           } 

     /* navbar (rest of the header) */ 
     .skin-blue .main-header .navbar { 
           background-color: #f4b943; 
           }   

     /* main sidebar */ 
     .skin-blue .main-sidebar { 
           background-color: #f4b943; 
           } 

     /* active selected tab in the sidebarmenu */ 
     .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{ 
           background-color: #ff0000; 
           } 

     /* other links in the sidebarmenu */ 
     .skin-blue .main-sidebar .sidebar .sidebar-menu a{ 
           background-color: #00ff00; 
           color: #000000; 
           } 

     /* other links in the sidebarmenu when hovered */ 
     .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{ 
           background-color: #ff69b4; 
           } 
     /* toggle button when hovered */      
     .skin-blue .main-header .navbar .sidebar-toggle:hover{ 
           background-color: #ff69b4; 
           } 
           '))) 
       ) 


) 

ho commentato il CSS a sottolineare ciò che esso modifica.

Answer 2

Grazie per il post. Penso che dovresti aggiungere "pulsante di attivazione quando tieni premuto il mouse" per completarlo. Il codice di esempio è il seguente:

/* toggle button when hovered */      
.skin-blue .main-header .navbar .sidebar-toggle:hover{ 
    background-color: #ff69b4; 
}