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, Dec 22 '16 at 14:02
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, Dec 22 '16 at 14:29
@YonasHailu This link [link](https://rdrr.io/cran/shinydashboard/man/sidebarMenu.html) may give u idea.... I am looking for CSS tag for blue line to change its color — string, Dec 22 '16 at 14:57

score 9 · Accepted Answer · answered Dec 22 '16 at 15:15

9

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

answered Dec 22 '16 at 15:15

tblznbits

6,602
6
36
66

Thanks.It works. Is there method to know these tags as my project works progress would need these information such as such customization of _menusubitem_ etc. – string Dec 23 '16 at 07:22
1

Run the app in whatever browser you prefer, and then right click on the element you want to change. Choose inspect element, and look for the CSS styling you're interested in. The biggest thing is just knowing, a priori, the general CSS styling you should be looking for. For example, I knew that I was looking for a blue color assigned to a `border-left` property in this situation. And that knowledge just comes from experience. – tblznbits Dec 23 '16 at 12:21
Thank you. Got it. for menuSubItem _.sidebar-menu .treeview-menu_ – string Dec 26 '16 at 12:32

Change sidebar menu item color in R Shiny

1 Answers1