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

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) { }
)

I'm not specifically familiar with `shinyDashboardPlus`, but this article should apply to customizing CSS regardless of the package: https://shiny.rstudio.com/articles/css.html — Marcus, Aug 21 '20 at 16:45

Bertil Baron · Accepted Answer · 2020-08-24T12:28:35.760

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) { }
)

Hello and thank you. Regarding the icon, the issue is that as soon as the argument stores any `HTML()` the icon goes to the next line, which is something we want to prevent. — yeahman269, Aug 24 '20 at 10:27
@yeahman269 ok I added what I think is the solution to your problem with the Icon. — Bertil Baron, Aug 24 '20 at 12:29

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

1 Answers1

Linked