Question 295961 in CSS Question posted in
Some basic documentation can be found here.

Css – Best way to change bslib value_box title text size?

I’m putting a few a bslib value_box on my shiny page and have it working well but the font size for the title is smaller than I would like and can be hard to read. I have read through the bslib and value_box documentation and there doesn’t seem to be a way to change title font size. Is there a way to increase the font size for the value_box title?

library(bsicons)
library(bslib)

ui <- page_fixed(
  value_box(
    title = "24-hour snowfall",
    value = textOutput("snow"),
    showcase = bs_icon("snow2"), 
    theme_color = "green"
  )
)

server <- function(input, output) {
  output$snow <- renderText({
  "2 inches"
  })
}

shinyApp(ui, server)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to find the correct sections of CSS code to modify. The following code was able to change the title of the value boxes and solved my issue.

    tags$head(tags$style(HTML('.bslib-value-box .value-box-title {font-size:18px;}'))),

  2. 0

    In this example, the custom CSS code targets the .value-box .small-box h3 selector, which corresponds to the title element within the valueBox. The font-size property is set to 24px in this case, but you can adjust it to your preferred size.

    Note that the specific class names and structure might vary depending on the exact version of the shinydashboard or shinydashboardPlus package you are using. If you encounter any issues, you may want to inspect the HTML structure of your rendered page and adjust the CSS accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search