代码之家  ›  专栏  ›  技术社区  ›  Iain

如何改变闪亮仪表板的颜色?

  •  26
  • Iain  · 技术社区  · 9 年前

    (来自闪亮的谷歌集团的交叉帖子)

    有人能给我指出需要修改闪亮仪表板颜色的标签名称吗?

    修改自 http://rstudio.github.io/shinydashboard/appearance.html#long-titles 这会将仪表板的左上角更改为橙色

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

    我不清楚如何将标题和侧边栏的其余部分更改为橙色,以及如何在选择/突出显示“SideBarMenu”上的项目时更改颜色。

    4 回复  |  直到 7 年前
        1
  •  72
  •   Konstantin Firsov NicE    8 年前

    根据您发布的链接示例,您可以尝试:

    用户界面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;
                                  }
                                  ')))
                    )
    
    
    )
    

    我对CSS进行了评论,指出它修改了什么。

        2
  •  5
  •   Mihriban Minaz Andy Davies    8 年前

    谢谢你的来信。我认为您应该添加“悬停时切换按钮”以使其完整。示例代码如下:

    /* toggle button when hovered  */                    
    .skin-blue .main-header .navbar .sidebar-toggle:hover{
      background-color: #ff69b4;
    }
    
        3
  •  1
  •   AleG    4 年前

    谢谢@NicE的回答。另外:如果有人想要控制侧边栏菜单选择的左边框的颜色重音 border-left 物业工程:

                /* active selected tab in the sidebarmenu */
                .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                                      background-color: #2e6984;
                                      border-left: 3px solid #254264;
                                      }
    
                /* other links in the sidebarmenu */
                .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                                      background-color: #3E8CB0;
                                      color: #FFFFFF;
                                      }
    
                /* other links in the sidebarmenu when hovered */
                 .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                                      background-color: #2e6984;
                                      border-left: 3px solid #254264;
                                      }
    
    
        4
  •  0
  •   shghm    3 年前

    也许这个软件包可以进一步帮助您:

    https://github.com/dreamRs/fresh

    它允许很好地设置自定义主题和颜色,而不必自己处理CSS定义,但可以创建它们以供重复使用。

    更多信息可以在这里找到(这是一本非常详细的书,有更多的主题!): https://unleash-shiny.rinterface.com/beautify-with-fresh.html