Modify the font color in shiny dashboard

Question

In shiny dashboard I have found this link to modify the color in sidebar and header. But I could not find out the way to modify the font color for sidebar items !The default font color is white and it is not readable if you pickup the light color for the sidebar. I would appreciate if someone could help for a css code to fix the font color !

ui = dashboardPage(
  dashboardHeader(
    title = "Example of a long title that needs more space",
    titleWidth = 450

  ),
  dashboardSidebar(
    br(),


    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"),
             checkboxGroupInput("selectVar", "",choices = c('A','B','C'),selected = 'A' )),

    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             selectInput("select1",label ="Select :",choices = c('A','B','C'),multiple = TRUE))
  ),
  dashboardBody(
    # Also add some custom CSS to make the title background area the same
    # color as the rest of the header.
    tags$head(tags$style(HTML('
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #7E59A4;
                              }

        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: #7E59A4;
                              }

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: #7E59A4;
                              }        

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #FFFFFF;
                              }


        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #FFFFFF;
                              color: #000000;
                              }

        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #FFFFFF;
                              }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #FFFFFF;
         }
       /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #FFFFFF;
                              }
                              ')))
  )


)

server <- function(input, output, session) {}

shinyApp(ui = ui , server = server)

score 2 · Answer 1 · answered Mar 26 '20 at 14:19

2

I think this is what you're looking for:

.content-wrapper, .right-side {
background-color: #FFFFFF;
}

answered Mar 26 '20 at 14:19

TTS

1,818
7
16

It does work for the dashboard body but not the sidebar (inside the menu item) as I posted a photo in the question – Haribo Mar 26 '20 at 14:25

score 1 · Accepted Answer · answered Mar 26 '20 at 22:23

By clicking f12 on your shiny app browser you will have a background HTML syntax for your page. Once could scroll to find the section name that should be changed. In this case it is called .treeview-menu :

therefore all you need to do is adding :

.skin-blue .treeview-menu {
                              background-color: #FFFFFF;
                              color: #000000;
                              }

score -1 · Answer 3 · edited Apr 17 '20 at 09:41

I followed your instruction to update the bullet point font size and color, but it caused my menusubitem font size and color sitting in the sidebar to change as well, please advise how to resolve that. I went through all google page, did not find similar solution, thanks

I tried to put tags style on the top and inside as well, not working.

 shinyUI<- ( dashboardPage( skin = "red",
                       dashboardHeader(title = "QCA", dropdownMenuOutput("msgoutput")),
                       dashboardSidebar(
                           textInput("text", "Text"),
                           sidebarMenu(

                               menuItem(" Induction", tabName = "Induction"),
                               menuItem(" QCA KPI", tabName = "summary"),
                               menuItem("Client Account Service-- Site", tabName = "cas_bsl"),
                               menuItem("Client Account Service-- Site", tabName = "cas_ba"     ),
                               menuItem("Debt Lodgement", tabName = "dl",badgeLabel = "coming soon", badgeColor = "green"),
                               menuItem("CBRS", tabName = "cbrs",badgeLabel = "Coming soon", badgeColor = "green")
                           )),

                       dashboardBody(
                           tabItems(
                               tabItem( tabName = "Induction", 
                                        fluidPage(
                                          h2(" QCA Dashboard", align = 'Center'),
                                          hr(),
                                          h4("QCA Dashboard is reporting tool specific to the Service Delivery enviroment. This is an online self-service 
                                            data visulization and discovery tool that is interactive and intuitive to the mind of the user. All important information 
                                            has been collated into a centralized database to provide instant information in the forms of charts and tables."),
                                          hr(),
                                           h4( "The dashboard is reporting tool for Business Units Directors, Leaders and Support Officers. The data is sourced from QA portal.
                                               Current is trial version. "),
                                          hr(),
                                          hr(),


                                           tags$div(tags$ul(
                                            tags$li(tags$span("Summary "), tags$style("{font-size:36px;}")),
                                            hr(),
                                            tags$li(tags$span("Client Account Service")),
                                            hr(),
                                            tags$li(tags$span("Debt Lodgement")),
                                            hr(),
                                            tags$li(tags$span("CBRS"))))
                                            ))
                                        ,

Modify the font color in shiny dashboard

3 Answers3