knitr::opts_chunk$set(echo = TRUE)
In this tutorial we can see how to use make_css
to create a css file. We can then use this file
in our web application (including shiny) or html file. Initially, we can see how to use this
function on its own and then the ways we can combine it with shiny.
A simple example of how to use make_css
would be:
library(tableHTML) mycss <- make_css(list('table', c('text-align', 'font-size'), c('center', '20px')), list('th', c('background-color', 'height'), c('lightgreen', '30px'))) print(mycss)
As seen from the above example make_css
takes an arbitrary number of lists as arguments.
The number of lists provided depends on the user and how big the css file will be according to their
needs. Each list needs to have a length of three and needs to follow a specific format i.e.:
#another example mycss <- make_css(list(c('table', 'td'), c('text-align', 'font-size'), c('center', '20px')), list('th', c('background-color', 'height'), c('lightgreen', '30px'))) print(mycss)
You can use any selector that you would normally use in a css file:
#adding a special selector mycss <- make_css(list('table td', c('text-align', 'font-size'), c('center', '20px'))) print(mycss)
You can even use selectors like hover using the following way:
mycss <- make_css(list('table td:hover', 'background-color', 'lightyellow')) print(mycss)
And a more complicated example that uses some of the above:
mycss <- make_css(list(c('.myclass', '.myclass2', '#myid', '.myclass[type="text"]'), c('padding', 'margin-bottom', 'background-color', 'box-shadow'), c('15px', '15px', 'rgba(0,0,0,0.5)', '0 1px 2px #ccc, inset 0 1px 0 #fff'))) print(mycss)
The way we used make_css
above will create a string of the css. In order to save that to a file
we need to use the file argument in the following way:
make_css(list(c('table', 'td'), c('text-align', 'font-size'), c('center', '20px')), list('th', c('background-color', 'height'), c('lightgreen', '30px')), file = 'mycss.css')
There are two ways to use make_css
with shiny.
The first one would be directly in the ui.R using tags$style
(which is what includeCSS
uses
behind the scenes after it loads the file):
library(shiny) #ui.R shinyApp( ui = fluidPage( fluidRow( #leave some spacing br(), tags$style(make_css(list('tr:hover', 'background-color', 'lightyellow'))), column(width = 1), uiOutput("mytable")) ), server = function(input, output) { output$mytable <- renderUI( tableHTML(mtcars, second_headers = list(c(3, 4, 5), c('col1', 'col2', 'col3'))) )} )
The second way is the standard way i.e. creating a file with all the css and then loading it in
shiny using includeCSS
in the way it was described in the
tableHTML tutorial. As a fast example we
create a css file using make_css
:
#when working on shiny the css file is best placed in the www/ folder of the shiny app. #This will then be read by includeCSS in the normal way. #check the above link for more info. make_css(list('tr:hover', 'background-color', 'lightyellow'), file = 'www/mycss.css')
#ui.R shinyUI( fluidPage( fluidRow( #leave some spacing br(), column(width = 1), #include css file in shiny includeCSS('www/mycss.css'), uiOutput("mytable")) ) ) #server.R shinyServer( function(input, output) { output$mytable <- renderUI( tableHTML(mtcars, second_headers = list(c(3, 4, 5), c('col1', 'col2', 'col3'))) )} )
This would complete our tutorial on the make_css
function!
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.