CODEWITHSUNDEEP
htmlcssrshiny
esteban
esteban

Reputation: 191

adding a CSS Stylesheet in R shiny

I'm making my first shiny application and am having trouble linking an external .css file. I've seen a few tutorials and references where people have explained how to do it and even showed example code, but I haven't had any luck. Most of the example I've seen it working use the shinyUI or fluidPage functions, like this using theme:

shinyUI(fluidPage(theme = "bootstrap.css",
       headerPanel("New Application"),
       sidebarPanel(
              sliderInput("obs", "Number of observations:", 
              min = 1, max = 1000, value = 500)
                   ),
       mainPanel(plotOutput("distPlot"))
                )
       )

or this using tags$link:

shinyUI(fluidPage(
       tags$head(
                tags$link(rel = "stylesheet", type = "text/css", href = "bootstrap.css")
                ),
       headerPanel("New Application")
                 )
       )

or using includeCSS

I'm using fluidPage alone without shinyUI but none of the options works. I've confirmed that my working directory and app-Directory are where I think they should be, and contains the "www" subdirectory which holds the .css file. The only thing that works is if I add a tags$style and a HTML inside of my tags$head like this:

fluidPage(
         tags$head(
             tags$style(
                       HTML(
                           "h1 {color:purple;}
                           .blue-item {color:blue;}
                           #dark {color:navy;}"
                            )
                       )
                   )
         )

but it doesn't solve the problem, since I don't link a CSS stylesheet with this command and therefore I don't change the appearance of my app.

Upvotes: 19

Views: 8623

Answers (2)

divibisan
divibisan

Reputation: 12155

From @esteban:

I already solved the issue, I renamed the file to app.R instead of <mytestapp>.R and RStudio recognized it differently and was able to load the .css file. Another alternative I found was to install the R-package shinythemes with install.packages("shinythemes") and define the theme in fluidPage as follows: 

fluidPage(
    theme = shinytheme("cerulean"),
    ### UI CODE HERE ###
)

Upvotes: 1

Arunbal
Arunbal

Reputation: 344

To get CSS into your Shiny App, you 

Add style sheets with the www directory
Add CSS to your HTML header
Add styling directly to HTML tags

Link to a stylesheet file

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="bootstrap.css"/>
  </head>
  <body>
  </body>
</html>

Upvotes: 1

Related Questions