Shiny - Changing size, colour and font of text (boxes)

Question

This must be a simple question, but I haven't managed to find any script or advice regarding changing the size, font and colour of text in shinyDashboard boxes. Say for example, I want to make this box display 14px Arial grey text:

  box(width = 4, title = "sample", "this is a test")

I would imagine this requires css, but is there any way I can achieve this using built-in functions from Shiny?

Many thanks.

Answer 1

You would need to change the box's CSS for this to work. You could pass the CSS directly in the ui, using tableHTML::make_css. Function box creates an HTML class called "box" which you can use to change the box's CSS:

library(shiny)
library(tableHTML)

ui <- fluidPage(
 tags$style(make_css(list('.box', 
                          c('font-size', 'font-family', 'color'), 
                          c('14px', 'arial', 'red')))),
 box(width = 4, title = "sample", "this is a test")
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Output:

I made the text red so you can tell the difference from black easily. You can replace that with grey or whichever colour you want.