Change default CSS styling of `shinydashboardPlus::descriptionBlock()` - css

Question

I find shinydashboardPlus::descriptionBlock() quite nice but I am a bit frustrated not being able to change its styling within R. How can we achieve that?
header is necessarly bold,
text is necessarly in UPPERCASE,
Using HTML() in number put the icon to the next line.
Show case:
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(
solidHeader = FALSE,
title = "Status summary",
background = NULL,
width = 4,
status = "danger",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
number = "17%",
numberColor = "green",
numberIcon = "caret-up",
header = "not bold please",
text = "set me in lowercase please",
rightBorder = TRUE,
marginBottom = FALSE
)
),
column(
width = 6,
descriptionBlock(
number = HTML("<h4>icon?</h4>"),
numberColor = "red",
numberIcon = "skull-crossbones",
header = "using html put",
text = "icon to next line",
rightBorder = FALSE,
marginBottom = FALSE
)
)
)
)
),
title = "Description Blocks"
),
server = function(input, output) { }
)

Answer 1

To solve this problems you need to insert css statements that equally specific as the css code supplied by the package.
To sole the bold header insert .description-block>.description-header { font-weight: 500; }
to remove the always Uppercase insert .description-block>.description-text { text-transform: none; }
With the Icon problem. The problem is that you are using a <h4> tag. And this is by default a block element which moves the next object to a new line. Here you can either use a different tag such as <span> or set the display attribute to inline-block. In the example below I used the later solution
All together it would look like this
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$style(
HTML("
.description-block>.description-text {
text-transform: none;
}
.description-block>.description-header {
font-weight: 500;
}
.description-percentage>h4 {
display: inline-block;
}
")
)
),
box(
solidHeader = FALSE,
title = "Status summary",
background = NULL,
width = 4,
status = "danger",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
number = "17%",
numberColor = "green",
numberIcon = "caret-up",
header = "not bold please",
text = "set me in lowercase please",
rightBorder = TRUE,
marginBottom = FALSE
)
),
column(
width = 6,
descriptionBlock(
number = HTML("<h4>icon?</h4>"),
numberColor = "red",
numberIcon = "skull-crossbones",
header = "using html put",
text = "icon to next line",
rightBorder = FALSE,
marginBottom = FALSE
)
)
)
)
),
title = "Description Blocks"
),
server = function(input, output) { }
)