Wie ändert man die Farbe in einem glänzenden Dashboard?

Question

(Cross Beitrag von glänzenden Google-Gruppen)

Könnte jemand mich auf die Tag-Namen verweisen, die ich die Farbe eines glänzenden Dashboard ändern muss?

Geändert von http://rstudio.github.io/shinydashboard/appearance.html#long-titles dies wird die linke obere Ecke meines Armaturenbrett zu Orange wechselt

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

Es ist mir unklar, wie der Rest der Kopf- und Seitenleiste zu Orange zu ändern, und wie kann ich ändern die Farbe, wenn ein Objekt im "SideBarMenu" ausgewählt/hervorgehoben ist.

Answer 1

am Beispiel Basierend geschrieben Sie einen Link auf die Sie versuchen können:

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; 
           } 
           '))) 
       ) 


) 

ich die CSS kommentierte darauf hinzuweisen, was sie modifiziert.

Answer 2

Danke für die Post. Ich denke, du solltest "toggle button wenn hovered" hinzufügen, um es zu vervollständigen. Beispielcode ist unten:

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