Modifying the shinydashboard theme with one line

[This article was first published on Pachá, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

R/Shiny Training: Should you find this blog to be of interest, kindly note that I offer personalized and group-based training sessions that may be reserved through Buy me a Coffee. Additionally, I provide training services in the Spanish language and am available to discuss means by which I may contribute to your Shiny project.

I’ve been using a customized ‘shinydashboard’ version since 2018, and some time ago I implemented changes to it that allowed me to use a custom CSS with one line changed in my R code. Originally I used some codes by @gadenbuie, and eventually I polished it.

One example is shiny.tradestatistics.io, a Shiny app that I’ve maintained for years and that won an honourable award in the Shiny Contest 2020.

The changes I made to the original ‘shinydashboard’ package are harmless, as these:

  1. Don’t alter the order of current arguments
  2. Add optional arguments that integrate with the existing code
  3. Don’t break dashboards running without custom CSS options

As an example, the aforementioned dashboard uses these simple changes:

  1. https://github.com/tradestatistics/visualization-with-shiny/blob/master/ui.R#L6-L7
  2. https://github.com/tradestatistics/visualization-with-shiny/blob/master/global.R#L129-L133

You can find a mimimal working example on GitHub. This example presents different customizations in the files ‘custom.css’ and ‘custom.min.css’ (I minified with ‘yui-compressor’). Among different options, you can copy the ‘skin-blue’ theme from my GitHub profile, put it in a new CSS inside ‘www/’, and from there adapt the colours and typographies to match those used by your organization or company.

A minimal structure, which you can modify by adapting the code from GitHub would be the next structure.

global.R

styles <- list(
  skin_color = "blue",
  css_files = c("css/AdminLTE.min.css", "css/_all-skins.min.css", "css/custom.min.css",
                "css/ion.rangeSlider.min.css")
)

app.R

library(shiny)
library(shinydashboard)

# Define UI for application that draws a histogram
ui <- dashboardPage(
    skin = "blue",
    theme = c("css/AdminLTE.min.css", "css/_all-skins.min.css", "css/custom.min.css",
              "css/ion.rangeSlider.min.css"),
    
    # Application title
    dashboardHeader(title = "Old Faithful Geyser Data"),
    
    ## Sidebar content
    dashboardSidebar(
        sidebarMenu(
            menuItem("Tab 1", tabName = "tab1", icon = icon("th"))
        )
    ),
    
    ## Body content
    dashboardBody(
        tabItems(
            # First tab content
            tabItem(tabName = "tab1",
                    fluidRow(
                        box(
                            title = "Controls",
                            # Sidebar with a slider input for number of bins 
                            sliderInput("bins", "Number of bins:", min = 1, max = 50,
                                        value = 30)
                        ),
                        
                        box(
                            # Show a plot of the generated distribution
                            plotOutput("plot1", height = 250)
                        )
                    )
            )
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
    
    output$plot1 <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        
        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

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

custom.css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Roboto:wght@400;700&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

/* H1 - H6 font */
h1, h2, .h1, .h2 {
  font-family: 'Roboto Slab', sans-serif;
  color: #2e87c8;
}

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
  font-family: 'Roboto Slab', sans-serif;
  color: #333333;
}

.sidebar {
  color: #333333;
}

.btn-icon-right {
  float: right !important;
  padding-top: 0.22em;
  padding-left: 0.25em;
}

.scroll-overflow-x {
  overflow-x: auto;
}

.irs-bar {
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  background: #333333;
}

.irs-from, .irs-to, .irs-single {
  background: #333333;
}

#loading {
  position: fixed;
  width: calc(100% - 230px);
  height: 100vh;
  padding-top: 100px;
  text-align: center;
  font-size: 100%;
  color: #000000;
  background-color: #f2f2f2;
  z-index: 800;
}

.main-header .logo {
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 700;
}
To leave a comment for the author, please follow the link and comment on their blog: Pachá.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)