web-dev-qa-db-ja.com

光沢のあるダッシュボードで色を変更する方法は？

（光沢のあるGoogleグループからのクロスポスト）

光沢のあるダッシュボードの色を変更する必要のあるタグ名を教えてくれませんか？

変更後 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」の項目が選択/強調表示されているときに色を変更する方法はわかりません。

rshinyshinydashboard
19
Iain

リンクを投稿した例に基づいて、次を試すことができます。

i.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にコメントして、変更内容を指摘しました。

52
NicE

投稿いただきありがとうございます。 「ホバーしたときのトグルボタン」を追加して完全にするとよいと思います。サンプルコードは次のとおりです。

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