'Is it possible to change the colour of a single character in Shiny Dashboard title?

Could you please help suggest a way to style (change colour) a specific character in Shiny Dashboard title?-Thanks I would like to highlight letter "R" in the title. E.g. in red/bold font style.

ui <- dashboardPage(dashboardHeader(title="Process MineR"),
                    dashboardSidebar(tags$head(tags$style("tfoot{display: table-header-group;}")),tags$head(tags$style(HTML(".shiny-notification {
                                         height: 50px;
                                         width: 300px;
                                         position:fixed;
                                         top: 40%;;
                                         left: 40%;;}"))),


     ....
htmlcssrshiny


Solution 1:[1]

We already have ::first-letter pseudo-element with which you can choose the first letter of a word with CSS and apply your own styles to them.

But in order to use something like ::nth-child, you will need http://letteringjs.com/ which will wrap letters in s for us so that we can select individual letters.

We can use like

h1:nth-letter(n) {
    //Style
}
h1:nth-letter(odd) {
    //Style
}
h1:nth-letter(even) {
    //Style
}

Solution 2:[2]

I have used the code below in a bs4Dash dashboard. The key is to use htmlOutput instead of textOutput.

header = dashboardHeader(
        title = dashboardBrand(
          title = htmlOutput('outpt_title'),
          color = "primary",
          href = "https://adminlte.io/themes/v3",
          image = 'inst/app/www/image.png'
        )
)

output$outpt_title <- renderText({

  paste0(
    paste0("<font color=\"#990303\"><b>",'R', "</b></font>")
    , paste0("<font color=\"#9c053c\"><b>",'I', "</b></font>")
    , paste0("<font color=\"#46f0a6\"><b>",'P', "</b></font>")
  )

})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abin Thaha
Solution 2 CallumH

Related Questions