Styling each individual page in R Shiny with CSS

Question

Styling each individual page in R Shiny with CSS

I've created an R shiny application and am in the process of adding styling to it. I've incorporated some HTML code and want to customize elements like the background color using CSS. After doing some research online, I learned that I should use the class attribute to separate my CSS. However, when I specify a class for each page, no CSS is displayed at all.

Below is a condensed version of my R shiny application. Any assistance on this matter would be highly appreciated.

library(shiny)

setwd("C:\\Users\\FRSAWG\\Desktop\\Application\\Shiny")

user <- shinyUI(navbarPage("",

tabPanel("Home Page",
       div(class="one",
         div(tags$style("#one body{background-color:blue;color:white;font-family:Arial}"),
            div(HTML("<h1><b><center>Home Page</center></b></h1>"))))),
tabPanel("Glossary",
       div(class="two",
           div(tags$style("#two body{background-color:red;color:white;font-family:Arial}"),
               div(HTML("<h1><b><center>Glossary</center></b></h1>")))))
))

serv <- shinyServer(function(input, output) {})

shinyApp(user, serv)

To clarify, I have assigned one and two as the class names for the respective pages.

html css r user-interface shiny

Answer 1

Answer №1

UPDATE: A helper function was created using the shinyjs package by Dean Attali to modify CSS elements based on input from R syntax. This eliminates flickering that occurred when toggling the body class.

Below is a working example of how to modify CSS styles based on tab changes:

library(shiny)
library(shinyjs)

## Modify the CSS style of a given selector
modifyStyle <- function(selector, ...) {

  values <- as.list(substitute(list(...)))[-1L]
  parameters <- names(values)

  args <- Map(function(p, v) paste0("'", p,"': '", v,"'"), parameters, values)
  jsc <- paste0("$('",selector,"').css({", paste(args, collapse = ", "),"});")

  shinyjs::runjs(code = jsc)

}

# UI for the app
user <- shinyUI(
  navbarPage(title = "", id = "navtab",
             header = div(useShinyjs()),
             tabPanel("Home Page",
                      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
                      "More text."
             ),

             tabPanel("Glossary",
                      div(HTML("<h1><b><center>Glossary</center></b></h1>")),
                      "More text."
             )
  )
)

# Server for the app
serv <- shinyServer(function(input, output, session) {

  observeEvent(input$navtab, {
    currentTab <- input$navtab # Name of the current tab

    if (currentTab == "Home Page") {
      modifyStyle("body", background = "blue", color = "white", 'font-family' = "Arial")
    }
    if (currentTab == "Glossary")  {
      modifyStyle("body", background = "red", color = "white", 'font-family' = "Arial")
    }
  })

})

shinyApp(user, serv)

The issue with CSS tags can be solved by changing #one to .one and correcting the syntax accordingly. Consider organizing your style tags within tags$head instead of spreading them throughout the code.

Updated example code below:

library(shiny)

user <- shinyUI(navbarPage(
  tags$head(
    tags$style(HTML(".one {background-color: blue; color: white; font-family: Arial}")),
    tags$style(HTML(".two {background-color: red;  color: white; font-family: Arial}"))
  ),

  tabPanel("Home Page", class = "one",
      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
      "More text."
  ),

  tabPanel("Glossary", class = "two",
      div(HTML("<h1><b><center>Glossary</center></b></h1>")),
      "More text."
  )
))

serv <- shinyServer(function(input, output) {})

shinyApp(user, serv)

A solution using the shinyjs package to update the class of the <body> dynamically when tabs change has also been provided. Please refer to the code snippet for implementation details.

Answer 2

UPDATE: A helper function was created using the shinyjs package by Dean Attali to modify CSS elements based on input from R syntax. This eliminates flickering that occurred when toggling the body class.

Below is a working example of how to modify CSS styles based on tab changes:

library(shiny)
library(shinyjs)

## Modify the CSS style of a given selector
modifyStyle <- function(selector, ...) {

  values <- as.list(substitute(list(...)))[-1L]
  parameters <- names(values)

  args <- Map(function(p, v) paste0("'", p,"': '", v,"'"), parameters, values)
  jsc <- paste0("$('",selector,"').css({", paste(args, collapse = ", "),"});")

  shinyjs::runjs(code = jsc)

}

# UI for the app
user <- shinyUI(
  navbarPage(title = "", id = "navtab",
             header = div(useShinyjs()),
             tabPanel("Home Page",
                      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
                      "More text."
             ),

             tabPanel("Glossary",
                      div(HTML("<h1><b><center>Glossary</center></b></h1>")),
                      "More text."
             )
  )
)

# Server for the app
serv <- shinyServer(function(input, output, session) {

  observeEvent(input$navtab, {
    currentTab <- input$navtab # Name of the current tab

    if (currentTab == "Home Page") {
      modifyStyle("body", background = "blue", color = "white", 'font-family' = "Arial")
    }
    if (currentTab == "Glossary")  {
      modifyStyle("body", background = "red", color = "white", 'font-family' = "Arial")
    }
  })

})

shinyApp(user, serv)

The issue with CSS tags can be solved by changing #one to .one and correcting the syntax accordingly. Consider organizing your style tags within tags$head instead of spreading them throughout the code.

Updated example code below:

library(shiny)

user <- shinyUI(navbarPage(
  tags$head(
    tags$style(HTML(".one {background-color: blue; color: white; font-family: Arial}")),
    tags$style(HTML(".two {background-color: red;  color: white; font-family: Arial}"))
  ),

  tabPanel("Home Page", class = "one",
      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
      "More text."
  ),

  tabPanel("Glossary", class = "two",
      div(HTML("<h1><b><center>Glossary</center></b></h1>")),
      "More text."
  )
))

serv <- shinyServer(function(input, output) {})

shinyApp(user, serv)

A solution using the shinyjs package to update the class of the <body> dynamically when tabs change has also been provided. Please refer to the code snippet for implementation details.

Styling each individual page in R Shiny with CSS

Answer №1

Similar questions

Why is the oninput function in JavaScript not functioning properly?

Update a JQuery function for an input field following an innerHTML command

CSS3 variables causing issues

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

Attaching a CSS file to a personalized WordPress widget

What is the best way to add "m" to the URL for redirecting mobile devices?

Is it possible to enable CSS margins to collapse across a fieldset boundary in any way?

Incorporating fresh JSON information into an established database

Add a new class to an element located in a separate div using JavaScript

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

Inquiries regarding jQuery's functionality and efficiency

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

Is there a way for me to generate a placeholder that relies on a specific number of past values from a different variable?

What is the difference in speed between drawing on a transparent canvas and determining if a point is transparent compared to determining if a point is within a complex polygon?

Access an HTML page programmatically using JavaScript

What could be causing the page to automatically scroll to the bottom upon loading?

Submitting the form with a target of _blank will result in the form being submitted on both a

Issue with syntax when transferring an HTML element from the #div to the body

Customizing data from AJAX responses

Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS