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

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

shinydashboard shiny r

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 年前

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进行了评论,指出它修改了什么。

Mihriban Minaz Andy Davies 8 年前

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

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

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

shghm 3 年前

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

https://github.com/dreamRs/fresh

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

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