Изменить цвет элемента меню боковой панели в R Shiny

Может ли кто-нибудь сообщить мне имя тега, чтобы изменить цвет синей линии (см. Изображение в menuItem в Shiny Dashboard. Вот код для изменения цвета bg элемента меню боковой панели.

.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
 background-color: rgb(107,194,0);
color: rgb(255,255,255);font-weight: bold;font-size: 18px;
}

Точно так же можно настроить цвет синей линии. введите описание изображения здесь

РЕДАКТИРОВАТЬ: добавлен полный код - цвет всех остальных частей был изменен, кроме синей линии.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(

dashboardHeader(
),

dashboardSidebar(

sidebarMenu(
  menuItem("Folder", tabName = "root", icon = icon("folder")),
  menuItem("My Home", tabName = "home", icon = icon("home")),
  menuItem("Document", tabName = "document", icon = icon("document"))
)

),
dashboardBody(

tags$head(tags$style(HTML('
                          /* logo */
                          .skin-blue .main-header .logo {
                          background-color: rgb(255,255,255); color:        rgb(0,144,197);
                          font-weight: bold;font-size: 24px;text-align: Right;
                          }

                          /* logo when hovered */

                          .skin-blue .main-header .logo:hover {
                          background-color: rgb(255,255,255);
                          }


                          /* navbar (rest of the header) */
                          .skin-blue .main-header .navbar {
                          background-color: rgb(255,255,255);
                          }

                          /* main sidebar */
                          .skin-blue .main-sidebar {
                          background-color: rgb(255,125,125);;
                          }

                          # /* main body */
                          # .skin-blue .main-body {
                          # background-color: rgb(0,144,197);
                          # }

                          /* active selected tab in the sidebarmenu */
                          .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                          background-color: rgb(107,194,0);
                          color: rgb(255,255,255);font-weight: bold;font-size: 18px;
                          }

                          /* other links in the sidebarmenu */
                          .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                          background-color: rgb(255,125,125);
                          color: rgb(255,255,255);font-weight: bold;
                          }

                          /* other links in the sidebarmenu when hovered */
                          .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                          background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold;
                          }

                          /* toggle button color  */
                          .skin-blue .main-header .navbar .sidebar-toggle{
                          background-color: rgb(255,255,255);color:rgb(0,144,197);
                          }

                          /* toggle button when hovered  */
                          .skin-blue .main-header .navbar .sidebar-toggle:hover{
                          background-color: rgb(0,144,197);color:rgb(255,255,255);
                          }

#                           ')))

))


server <- shinyServer(function(input, output, session) {

})

shinyApp(ui, server)

r css shiny shinydashboard
person string    schedule 22.12.2016    source источник
comment
не могли бы вы предоставить больше кода, чтобы каждый мог дать решение!   -  person Yonas Hailu    schedule 22.12.2016
comment
@YonasHailu добавил еще коды.   -  person string    schedule 22.12.2016
comment
похоже, что значения синей линии недоступны здесь, если у вас есть ссылка или скрипт, чтобы я мог проверить код.   -  person Yonas Hailu    schedule 22.12.2016
comment
@YonasHailu Эта ссылка ссылка может дать вам представление .... Я ищу для тега CSS для синей линии, чтобы изменить ее цвет   -  person string    schedule 22.12.2016

Ответы (1)


arrow_upward
7
arrow_downward

Цвет можно изменить с помощью следующего CSS

.skin-blue .sidebar-menu > li.active > a {
  border-left-color: #ff0000;
}

Обратите внимание, что если вы измените тему оформления своей панели инструментов, вам, вероятно, придется также изменить здесь CSS, поскольку он ссылается на тему .skin-blue. Также обратите внимание, что это не меняет цвет синей полосы при наведении курсора на пункт меню. Для этого измените приведенный выше CSS на

.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
  border-left-color: #ff0000;
}
person tblznbits    schedule 22.12.2016
comment
Спасибо, это работает. Есть ли способ узнать эти теги, поскольку в ходе работ над моим проектом эта информация потребуется, например, для настройки menusubitem и т. Д. - person string; 23.12.2016
comment
Запустите приложение в любом браузере, который вы предпочитаете, а затем щелкните правой кнопкой мыши элемент, который хотите изменить. Выберите элемент inspect и найдите интересующий вас стиль CSS. Самое важное - это знать, априори, общий стиль CSS, который вам следует искать. Например, я знал, что в этой ситуации ищу синий цвет, назначенный свойству border-left. И это знание просто приходит из опыта. - person tblznbits; 23.12.2016
comment
Спасибо. Понятно. для menuSubItem .sidebar-menu .treeview-menu - person string; 26.12.2016