Include custom css in a shiny app

Question

I have the following shiny app

ui.R

data("iris")
library(ggplot2)
library(dplyr)

ui <- fluidPage(theme = "mystyle.css",
  tabsetPanel(
    tabPanel("Tab 1", "Hello"),
    div(id = "box1", style="color:#0000FF", selectInput("boxplot1", "Choose a dataset:",
                choices = c(list("setosa", "versicolor", "virginica")))),
    div(id = "box2", selectInput("boxplot1", "Choose a dataset:",
                choices = c(list("setosa", "versicolor", "virginica"))))
  ),
  mainPanel(plotOutput("plot_boxplot"))
)

server.R

library(shiny)
library(datasets)

shinyServer(function(input, output) {

  filtered <- reactive({
    iris %>%
      filter(Sepal.Length >= 0)
  })

  output$plot_boxplot <- renderPlot({
    ggplot(filtered(), aes(x=Species, y=Sepal.Length)) + 
      geom_point(size = 4) + 
      geom_boxplot() +
      ylab("Sepal Length")  +
      stat_summary(fun.y=mean, geom="point", shape=5, size=4) 
  })


  # Generate a summary of the dataset
  output$summary <- renderPrint({
    dataset <- datasetInput()
    summary(dataset)
  })

  # Show the first "n" observations
  output$view <- renderTable({
    head(datasetInput(), n = input$obs)
  })
})

This all works fine. However I would like to include some custom CSS.

If I take my my first input box, wrap it into a div statement and include some .css like this:

    div(id = "box1", style="color:#0000FF", selectInput("boxplot1", "Choose a dataset:",
            choices = c(list("setosa", "versicolor", "virginica")))),

It works. However, for organisational purposes I would like to store it a seperate .css file. If I create in my www folder and include a link:

ui <- fluidPage(theme = "mystyle.css",

And add the following to the file mystyle.css:

#box1{
 width: 20%;
 height: 100px;
 style="color:#0000FF";
}

I dont get the same result. Check all the code here:

mystyle.css

#box1{
 width: 20%;
 height: 100px;
 style="color:#0000FF";
}

ui.R

data("iris")
library(ggplot2)
library(dplyr)

ui <- fluidPage(theme = "mystyle.css",
  tabsetPanel(
    tabPanel("Tab 1", "Hello"),
    div(id = "box1", selectInput("boxplot1", "Choose a dataset:",
                choices = c(list("setosa", "versicolor", "virginica")))),
    div(id = "box2", selectInput("boxplot1", "Choose a dataset:",
                choices = c(list("setosa", "versicolor", "virginica"))))
  ),
  mainPanel(plotOutput("plot_boxplot"))
)

server.R

library(shiny)
library(datasets)

# Define server logic required to summarize and view the selected dataset
shinyServer(function(input, output) {

  filtered <- reactive({
    iris %>%
      filter(Sepal.Length >= 0)
  })

  output$plot_boxplot <- renderPlot({
    ggplot(filtered(), aes(x=Species, y=Sepal.Length)) + 
      geom_point(size = 4) + 
      geom_boxplot() +
      ylab("Sepal Length")  +
      stat_summary(fun.y=mean, geom="point", shape=5, size=4) 
  })


  # Generate a summary of the dataset
  output$summary <- renderPrint({
    dataset <- datasetInput()
    summary(dataset)
  })

  # Show the first "n" observations
  output$view <- renderTable({
    head(datasetInput(), n = input$obs)
  })
})

Any thoughts on what I am doing wrong here?

Answer 1

have you tried using IncludeCSS(), like suggested here?
could it be that your .CSS file is not saved in your www folder as suggested in shiny's tutorial?