I am trying to find out the tag name that can be used to change the color of the blue line in the menuItem image on Shiny Dashboard. I have successfully changed the background color of the sidebar menu item using the following code:
.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;
}
Now, I want to customize the color of the blue line as well. Check out the image here.
EDIT: I have included the full code below. I have customized the colors for other parts but still need help with changing the color of the blue line.
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;
}
/* Hover effect on logo */
.skin-blue .main-header .logo:hover {
background-color: rgb(255,255,255);
}
/* Navbar */
.skin-blue .main-header .navbar {
background-color: rgb(255,255,255);
}
/* Main Sidebar */
.skin-blue .main-sidebar {
background-color: rgb(255,125,125);;
}
/* Active selected tab in 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 sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: rgb(255,125,125);
color: rgb(255,255,255);
font-weight: bold;
}
/* Hover effect on other links in sidebarmenu */
.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);
}
/* Hover effect on toggle button */
.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)