How can I override the text size of title and tabs while using a bslib theme?

Question

I'm currently using the bslib package to show pretty value boxes inside a modal dialog. However, I want to change the size/font of the current titles and tabs in the modal dialog box. How can I do this while preserving the bslib bootstrap theming for value boxes? Is there a way I can only use the bslib theming on the value boxes?

library(shiny)
library(leaflet)
library(bslib)
library(bsicons)

# Define UI for application that draws a histogram
data <- PlantGrowth
data$Lat <- runif(nrow(data), 40, 41)
data$Lon <- runif(nrow(data), -1, 3)
data <- rbind(data[1,], data[11,])

ui <- bootstrapPage(
  theme = bslib::bs_theme(bootswatch = "lumen"),
  leafletOutput("map", height="100vh"),
  absolutePanel(style="padding-left: 30px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px",
                top = 10, left = 10, width = 300, height = "auto",
                actionButton("button", "Show all data")
  )
)

server <- function(input, output) {
  
  observeEvent(list(input$map_marker_click$id, input$button), {
    showModal(
      modalDialog(
        title = "Title",
        tabsetPanel(
          tabPanel(
            "TAB 1",
            fluidPage(
              fluidRow(
                column(4,
                       value_box(
                         title = "TEXT 1",
                         value = h4("Value 2"), 
                         showcase = icon("arrow-trend-up"),
                         full_screen = F,
                         theme_color = "warning"
                       )
                )
              )
            )
          ),
          tabPanel(
            "TAB 2"
          )
        ),
        easyClose = T,
      ))
  }, ignoreInit = T)
  
  output$map<-
    renderLeaflet({
      plot.map <-
        leaflet(
          data = data
        ) %>% 
        addTiles() %>% 
        addCircleMarkers(
          lat = ~ Lat, lng = ~ Lon,
          layerId = ~ group)
      return(plot.map)
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

Use [CSS](https://shiny.rstudio.com/articles/css.html). – Limey Mar 29 '23 at 15:22 — Limey, Mar 29 '23 at 15:22

score 0 · Answer 1 · answered Mar 29 '23 at 16:02

You could modify the CSS font-size for the modal title class and the modal tabs class by adding this between bootstrapPage( and theme = bslib::bs_theme(bootswatch = "lumen"),:

  tags$head(
    
    tags$style(
      
      HTML("
/* Change the title font size */

.modal-title {
  font-size: 100px;
}

/* Change the tab font size */
.nav-tabs {
  font-size: 40px;
}

")
      
    )
    
    
  ),

Here's a picture:

The web developer tools in the browser are great for finding html elements and modifying the CSS on the fly. Here's a link with more info about using CSS in shiny: https://shiny.rstudio.com/articles/css.html

How can I override the text size of title and tabs while using a bslib theme?

1 Answers1