Change sidebar menu item color in R Shiny

Question

Could any one let me know the tag name to change the color of blue line (refer the Image in menuItem in Shiny Dashboard. Here is the code to change the bg color of sidebar menu item.

.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;
}

Similarly, looking to customize the color of blue line as well.

EDIT: Added Full Code - all the other parts color has been customized apart from 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;
                          }

                          /* 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)

can you please provide more code so that anyone can give a solution! — Yonas Hailu
it looks like the blue line values not available here if you have a link or fiddle so that I can inspect the code. — Yonas Hailu
@YonasHailu This link link may give u idea.... I am looking for CSS tag for blue line to change its color — string

tblznbits tblznbits · Accepted Answer · 2016-12-22T15:15:38

The color can be changed using the following CSS

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

Note that if you change the skin theme of your dashboard, you'll likely need to change the CSS here as well since it references the .skin-blue theme. Also note that this does not change the color of the blue bar when hovering over a menu item. To do that, change the above CSS to

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

Change sidebar menu item color in R Shiny

1 Answers