How to change colour and font of shiny dashboard title?

Question

How can i change the title of this dashboard title header to be the following :

I want it to say Basic DASHBOARD where DASHBOARD is in BOLD, RED FONT and Basic is in the default white font - i also want to adjust the size of the font of DASHBOARD to be somewhat larger? any ideas of how to do this in shiny dashboard title?

so basically needs to be RED and BOLD for DASHBOARD and larger, BASIC stays the same,

code below

library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

score 18 · Accepted Answer · answered Nov 15 '18 at 12:22

18

You can use inline css to achieve that:

dashboardHeader(title = span("Basic ", 
                             span("dashboard", 
                             style = "color: red; font-size: 28px")))

answered Nov 15 '18 at 12:22

thothal

16,690
3
36
71

wHAT ABOUT BOLD FONT? – Nov 15 '18 at 14:20
add `font-weight: bold;` to the style. You should familiarize yourself with HTML/css. Good resource is here: https://www.w3schools.com/ – thothal Nov 15 '18 at 14:47
cheers for the help will check it out!!!!! thanks a bunch really great answer accepted! – Nov 15 '18 at 15:22
But the problem is dashboardHeader width is too small to fit in long titles. How do we increase the width? – Lazarus Thurston May 23 '21 at 15:20
Look at the `titleWidth` argument of `dashboardHeader` – thothal May 25 '21 at 07:02

How to change colour and font of shiny dashboard title?

1 Answers1