Make sure your Shiny app loads the required packages:
library(shiny)
library(bslib)
Add the following to the top of ui.R
or app.R
(make sure the devtools
package is installed)
devtools::source_url("https://github.com/NERC-CEH/UKCEH_shiny_theming/blob/main/theme_elements.R?raw=TRUE")
Add the following to the UI
ui <- fluidPage(
#theme
theme = UKCEH_theme, # << add this line
# Application title
UKCEH_titlePanel("Old Faithful Geyser Data"), # << replace your titlePanel() with UKCEH_titlePanel()
...
)
See how it looks in a live Shiny app: https://connect-apps.ceh.ac.uk/content/5f616ea7-af1a-4716-a7bf-48ac970ce788
R Shiny is a very useful way of making your R code run in a user friendly way with a user interface. We can publish R Shiny applications using RStudio Connect: https://connect-apps.ceh.ac.uk/connect/
The generic R Shiny theme is based on bootstrap and doesn't conform to the UKCEH brand guidelines https://brandroom.ceh.ac.uk/. This guide aims to show how to adapt the default Shiny theme to fit in with other UKCEH web presences. You can either made the small additions to your existing Shiny app or work from a example template https://github.com/NERC-CEH/UKCEH_shiny_theming#examples
There are a number of different standard layouts you can use for R Shiny: https://shiny.rstudio.com/articles/layout-guide.html
If you have any feedback on this guide then please create an issue on this gitub repository or email Simon Rolph (SimRol@ceh.ac.uk) and Kate Randall (KatRan@ceh.ac.uk).
In the theme_elements.R
we define UKCEH_theme
and UKCEH_titlePanel
. They need to be included in the fluidPage()
function when defining ui
. This is an example using the sidebar layout.
The simplest way to get the theme is to use the source_url()
function in the devtools
package to source theme_elements.R
(as suggested by Michael Tso). Alternatively, you could copy the code from https://github.com/NERC-CEH/UKCEH_shiny_theming/blob/main/theme_elements.R?raw=TRUE and put it directly into your app.
You need to install and load the bslib
package. Presumably you've already installed the shiny
package.
install.packages("bslib")
library(bslib)
library(shiny)
devtools::source_url("https://github.com/NERC-CEH/UKCEH_shiny_theming/blob/main/theme_elements.R?raw=TRUE")
# Define UI for application that draws a histogram
ui <- fluidPage(
#theme
theme = UKCEH_theme,
# Application title
UKCEH_titlePanel("My first Shiny app"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
...
),
# Show a plot of the generated distribution
mainPanel(
...
)
)
)
You can also change the appearance of plots drawn using {ggplot2}
appear by using:
library(thematic)
thematic::thematic_shiny()
See https://rstudio.github.io/thematic/ for more details.
The UKCEH colours are defined here: https://brandroom.ceh.ac.uk/sites/default/files/2022-01/UKCEH_Colour_Guidelines.pdf
Here they are in hex code if you want to use them in your plots. For example if you have a bar plot use the hero colour for the bars.
logo_colours <- c("#007AC0","#59B444")
hero_colour <- '#0483A4'
primary_palette <- c("#292C2F",'#1685A3','#EAEFEC')
highlight_colour <- c("#F49633")
extended_colour_palette <- c("#8f7158","#fee9cd","#90c064","#37a635","#00883c","047e56","007370","#0383a4","#c9e7f2","34b8c7","009dcb","227fc1","0a5da4","00678e","f39532")
{bslib}
The bslib
package is designed for theming shiny apps and can be used to change some universal elements like colours and fonts https://shiny.rstudio.com/articles/themes.html
The UKCEH font is Montserrat. It is available on Google fonts: https://fonts.google.com/specimen/Montserrat
These settings make the most of the the existing UKCEH colour palette and sets the correct fonts.
library(bslib)
UKCEH_theme <- bs_theme(
bg = "#fff",
fg = "#292C2F",
primary = "#0483A4",
secondary = "#EAEFEC",
success = "#37a635",
info = "#34b8c7",
warning = "#F49633",
base_font = font_link(family = "Montserrat",href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap")
)
UKCEH_theme <- bs_add_variables(UKCEH_theme,
# low level theming
"headings-font-weight" = 600)
bs_theme_preview(UKCEH_theme)
You can preview a theme with bs_theme_preview()
which brings up a webpage like so:
Inputs:
Tables:
Fonts:
In R Shiny you can use the titlePanel()
function (https://shiny.rstudio.com/reference/shiny/0.14/titlePanel.html) to give the page a title at the top of the page and it also updates the title in the tab to be the same text.
The favicon is the tiny little image that appears in the tab of the web browser, it can be accessed direct via a web link from the brand room https://brandroom.ceh.ac.uk/themes/custom/ceh/favicon.ico so we don't need to download it ourselves.
Here is a drop in replacement of that function which also adds the UKCEH logo and adds | UK Centre for Ecology and Hydrology
after the title in the tab.
#titlePanel replacement
UKCEH_titlePanel <- function(title = "UKCEH Shiny app", windowTitle = title){
div(
img(src="https://www.ceh.ac.uk/sites/default/files/images/theme/ukceh_logo_long_720x170_rgb.png",style="height: 50px;vertical-align:middle;"),
h2(
title,
style ='vertical-align:middle; display:inline;padding-left:40px;'
),
tagList(tags$head(tags$title(paste0(windowTitle," | UK Centre for Ecology & Hydrology")),
tags$link(rel="shortcut icon", href="https://brandroom.ceh.ac.uk/themes/custom/ceh/favicon.ico"))),
style = "padding: 30px;"
)
}
When UKCEH_titlePanel
is included in the Shiny app it looks like this:
Note how the favicon and tab title have changed:
Currently still working on the best way to format a footer and what content to include from the main site etc.
A UKCEH branded version of the standard R Shiny example with some extra false inputs added to the sidebar.
Code: https://github.com/NERC-CEH/UKCEH_shiny_theming/blob/main/examples/sidebar_layout.R
Live preview: https://connect-apps.ceh.ac.uk/content/5f616ea7-af1a-4716-a7bf-48ac970ce788
Coming soon
Coming soon