css – 更改R Shiny中的侧边栏菜单项颜色

前端之家收集整理的这篇文章主要介绍了css – 更改R Shiny中的侧边栏菜单项颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

任何人都可以让我知道标签名称来改变蓝线的颜色(请参阅闪亮仪表板中menuItem中的图像.这是更改侧边栏菜单项的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); 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);
                          }


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

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

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

                          /* active selected tab in the sidebarmenu */
                          .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                          background-color: rgb(107,0);
                          color: rgb(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);
                          color: rgb(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,197);font-weight: bold;
                          }

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

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

#                           ')))

))


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

})

shinyApp(ui,server)
最佳答案
可以使用以下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;
}

猜你在找的CSS相关文章