关于 css:在 R Shiny 中更改侧边栏菜单项颜色 | 珊瑚贝

Change sidebar menu item color in R Shiny


谁能告诉我标签名称来改变蓝线的颜色(参考Shiny Dashboard中menuItem中的图像。这是改变侧边栏菜单项bg颜色的代码。

1
2
3
4
.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;
}

同样,希望自定义蓝线的颜色。enter

编辑:添加完整代码 – 除蓝线外,所有其他部件颜色均已自定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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)

  • 您能否提供更多代码,以便任何人都可以提供解决方案!
  • @YonasHailu 添加了更多代码。
  • 如果您有链接或小提琴,看起来蓝线值在此处不可用,以便我可以检查代码。
  • @YonasHailu 这个链接可能会给你一些想法……我正在寻找蓝线的 CSS 标记来改变它的颜色


可以使用以下 CSS 更改颜色

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

请注意,如果您更改仪表板的皮肤主题,您可能还需要在此处更改 CSS,因为它引用了 .skin-blue 主题。另请注意,将鼠标悬停在菜单项上时,这不会改变蓝条的颜色。为此,请将上面的 CSS 更改为

1
2
3
4
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
  border-left-color: #ff0000;
}
  • 谢谢。它有效。有没有办法知道这些标签,因为我的项目工作进度需要这些信息,例如菜单子项的自定义等。
  • 在您喜欢的任何浏览器中运行应用程序,然后右键单击要更改的元素。选择检查元素,然后查找您感兴趣的 CSS 样式。最重要的是先验地知道您应该寻找的一般 CSS 样式。例如,我知道在这种情况下我正在寻找分配给 border-left 属性的蓝色。而这些知识只是来自经验。
  • 谢谢你。知道了。对于 menuSubItem .sidebar-menu .treeview-menu


来源:https://www.codenong.com/41284845/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_8757.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?