Làm thế nào để thay đổi màu sắc trong bảng điều khiển sáng bóng?

Question

(bài đăng chéo từ các nhóm google sáng bóng)

Một số người có thể chỉ cho tôi tên thẻ mà tôi phải sửa đổi màu của bảng điều khiển sáng bóng?

Modified từ http://rstudio.github.io/shinydashboard/appearance.html#long-titles này sẽ thay đổi góc trên cùng bên trái của bảng điều khiển của tôi để cam

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

Đó là rõ ràng đối với tôi làm thế nào để thay đổi phần còn lại của tiêu đề và sidebar để cam, và làm thế nào tôi có thể thay đổi màu khi một mục trên "SideBarMenu" được chọn/tô sáng.

Answer 1

Dựa trên ví dụ bạn đăng một liên kết để bạn có thể thử:

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


) 

tôi nhận xét CSS để chỉ ra những gì nó sẽ thay đổi.

Answer 2

Cảm ơn bạn đã đăng bài. Tôi nghĩ bạn nên thêm "nút chuyển đổi khi di chuột" để hoàn thành. Mã mẫu bên dưới:

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