Search code examples
rshinyshinydashboard

How to change the text colour in shiny dashboard header containing and embedded image?

I have used the below code to embed an image in the header of my shiny dashboard. With my code, the text colour of the title changes, and I would like to revert this back to white. How can I modify my code so the title in the header is white while keeping the image? Thanks.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(

  dashboardHeader(titleWidth = 350,
                  title = tags$a(tags$img(src = "RStudioImage.png", height = '50',
                                          width = '50'),
                                 "Example Dashboard")),
  
  dashboardSidebar(),
  
  dashboardBody()
  
  )

server <- function(input, output) {
  
  
}

shinyApp(ui = ui, server = server)
Solution

  • The color changes because you wrapped the image and the title in an <a> tag used to add a hyperlink. As a result the default CSS rule for an <a> tag is applied which in general uses a different text color to indicate to the user that he can click on this element.

    If you don't want to add a hyperlink to the title or the image you could wrap in a <div> instead.

    library(shiny)
library(shinydashboard)
#> 
#> Attaching package: 'shinydashboard'
#> The following object is masked from 'package:graphics':
#> 
#>     box

ui <- dashboardPage(
  dashboardHeader(
    titleWidth = 350,
    title = tags$div(
      tags$img(
        src = "RStudioImage.png", height = "50",
        width = "50"
      ),
      "Example Dashboard"
    )
  ),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)
#> 
#> Listening on http://127.0.0.1:4023

    And just in case. If you want to add a hyperlink but just want to change the text color for the title you can use some inline CSS by adding a style attribute:

    library(shiny)
library(shinydashboard)
#> 
#> Attaching package: 'shinydashboard'
#> The following object is masked from 'package:graphics':
#> 
#>     box

ui <- dashboardPage(
  dashboardHeader(
    titleWidth = 350,
    title = tags$a(
      tags$img(
        src = "RStudioImage.png", height = "50",
        width = "50"
      ),
      "Example Dashboard",
      style = "color: white" 
    )
  ),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)
#> 
#> Listening on http://127.0.0.1:8734