关于 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)

可以使用以下 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;
}

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/269231.html

关于 css：在 R Shiny 中更改侧边栏菜单项颜色

Change sidebar menu item color in R Shiny

相关推荐

发表回复