Как изменить цвет на блестящей приборной панели?

(перекрестный пост из блестящих групп 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» выбран / выделен.


r shiny shinydashboard
person Iain    schedule 29.07.2015    source источник

Ответы (4)


arrow_upward
67
arrow_downward

На основе примера, на который вы разместили ссылку, вы можете попробовать:

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


)

Я прокомментировал CSS, чтобы указать, что он изменяет.

person NicE    schedule 30.07.2015
comment
Это здорово, спасибо. Есть идеи, как изменить цвет текста на боковой панели? - person Iain; 30.07.2015
comment
Вы можете установить аргумент color в CSS для .skin-blue .main-sidebar .sidebar .sidebar-menu a. Например, color: #000000; сделает текст черным (я добавил это в опубликованный мной код) - person NicE; 30.07.2015
comment
Спасибо! Только что открыл для себя инструменты разработчика в Chrome, которые делают процесс очень простым, так как я могу легко видеть, какие элементы присутствуют на странице. developer.chrome.com/devtools - person Iain; 30.07.2015
comment
Как можно изменить цвет левой границы меню в виде дерева, когда один из элементов этого меню выбран, а пользователь наводит курсор на меню в виде дерева? - person Skumin; 10.05.2018

arrow_upward
5
arrow_downward

Спасибо за сообщение. Я думаю, вам следует добавить «переключатель при наведении курсора», чтобы завершить его. Пример кода ниже:

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

arrow_upward
1
arrow_downward

Спасибо @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;
                                  }
person AleG    schedule 23.10.2020

arrow_upward
0
arrow_downward

Возможно, этот пакет поможет вам в дальнейшем:

https://github.com/dreamRs/fresh

Он позволяет довольно красиво настраивать собственные темы и цвета, не имея самостоятельной работы с определениями CSS, но может создавать их для многократного использования.

Дополнительную информацию можно найти здесь (довольно сложная книга с множеством других тем!): https://unleash-shiny.rinterface.com/beautify-with-fresh.html

person shghm    schedule 07.06.2021