Changing the font size of valueBoxes

Question

I would like to change the font size of the value and the subtitle for valueBoxes.

Below is my attempt, but would be grateful of any suggestions on how to change it in a way that looks similar to the default look. Below is my reporducible example.

require(shinydashboard)

valueBox2 <- function (value,header_val=4, subtitle, icon = NULL, color = "aqua", width = 4, 
                       href = NULL) {
  shinydashboard:::validateColor(color)
  if (!is.null(icon)) 
    shinydashboard:::tagAssert(icon, type = "i")
  boxContent <- div(class = paste0("small-box bg-", color), 
                    div(class = "inner", eval(parse(text=paste0('h',header_val,'(',shQuote(value),')'))), p(subtitle)), if (!is.null(icon)) 
                      div(class = "icon-large", icon))
  if (!is.null(href)) 
    boxContent <- a(href = href, boxContent)
  div(class = if (!is.null(width)) 
    paste0("col-sm-", width), boxContent)
}

ui = dashboardPage(title='hello',
  dashboardHeader(title='hello2'),
  dashboardSidebar(
    sliderInput('hval',label='header value',min=1,max=6,value=3)
  ),
  dashboardBody(
    valueBoxOutput('tmp')
  )
)

server = function(input, output) {
  output$tmp <- renderValueBox({
    valueBox2(value='90k',header_val = input$hval, subtitle='some long descritptive text',icon=icon("car"))
    })
}

shinyApp(ui=ui,server=server)

Answer 1

Hi you can change font size directly in valueBox with a p tag without rewriting valueBox function (if you want you can, just wrap value and subtitle args in tags$p), try :

library("shiny")
library("shinydashboard")

# header
header <- dashboardHeader(title = "Changing the font size of valueBoxes", titleWidth = 450)

# sidebar
sidebar <- dashboardSidebar(disable = TRUE)

# body
body <- dashboardBody(
  valueBox(
    value = "90k",
    subtitle = "some long descritptive text",
    icon = icon("car")
  ),
  valueBox(
    value = tags$p("90k", style = "font-size: 150%;"),
    subtitle = tags$p("some long descritptive text", style = "font-size: 150%;"),
    icon = icon("car fa-lg")
  ),
  valueBox(
    value = tags$p("90k", style = "font-size: 200%;"),
    subtitle = tags$p("some long descritptive text", style = "font-size: 200%;"),
    icon = icon("car fa-2x")
  ),
  valueBoxOutput(outputId = "mybigbox")
)

# server
server <- function(input, output) {
  output$mybigbox <- renderValueBox({
    valueBox(
      value = tags$p("90k", style = "font-size: 300%;"),
      subtitle = tags$p("some long descritptive text", style = "font-size: 300%;"),
      icon = icon("car fa-3x")
    )
  })
}
shinyApp(ui = dashboardPage(header, sidebar, body), server = server)