How to customise the style of your {shinydashboard} Shiny app

Using {shinydashboard} is great for creating dashboard prototypes with aheader-sidebar-body layout. You can quickly mock up a professionallooking dashboard containing a variety of outputs, including plots andtables.

However, after a while, you’ll probably have had enough of the “50shades of blue” default theme. Or, you might have been asked to tofollow company branding guidelines, so you need to replace the defaultcolours with custom ones.

This blog will take you through three different options when customisinga {shinydashboard}. First, we’ll look at using the colour and themeoptions available in the package. Then, we’ll show you how to use the{fresh} package to be able to use completely custom colour palettes.Finally, we will look at using custom CSS to give you even more controlof the overall style of your dashboard.

Do you require help building a Shiny app? Would you like someone to take over the maintenance burden?If so, check outour Shiny and Dash services.

The {shinydashboard} package

Before we get started with styling our dashboard, let’s do a quickrefresher of what {shinydashboard} is and how to use it.{shinydashboard} is a package which provides a simple dashboard layoutconsisting of a header, sidebar, and body. The code below creates anempty dashboard, using the main layout functions from {shinydashboard}:dashboardHeader(), dashboardSidebar(), and dashboardBody(), allwrapped inside of dashboardPage().

library("shinydashboard")library("shiny")ui = dashboardPage(  dashboardHeader(),  dashboardSidebar(),  dashboardBody())server = function(input, output, session) {  }shinyApp(ui, server)

The package is really good at this basic type of layout, and includesways to enhance it — for example by adding tabs to your app using themenuItem() function, as well as the addition of the box(),infoBox(), and valueBox() functions, offering ways of storingoutputs in different kinds of containers.

Sticking to quite a rigid layout is what makes {shinydashboard} sogreat – you don’t have to fiddle around with adjusting the width andheight of divs, deciding if you want a sidebar and which side thesidebar should be on etc. Instead, you can just use the default layoutwhich is enough for most dashboards.

However, this rigidity is also the main weakness of {shinydashboard}. Ifyou want to move beyond the basic layout, it may require hacky solutionsand can sometimes be downright impossible.

Despite this, it is possible to customise {shinydashboard} usingbuilt-in functions and arguments. Let’s take a look at how using anexample dashboard which displays and compares some summary statisticsfor rental properties in the Bay Area of California, US. All code usedin this blog post can be found on ourGitHub

Using built-in colours and skins

Our example app currently uses the {shinydashboard} default colours. Theonly styling I have done is set the fill colour of my bar chart to matchthe colour of the value boxes.

The first thing we can customise is the dashboard “skin”, which is thecolour of the dashboard header at the top of the app. The skinargument in dashboardPage() can be one of “blue” (the default),“black”, “purple”, “green”, “red”, or “yellow”. We will set the skin tobe “purple”:

dashboardPage(  skin = "purple",  ...)

which gives us

The other main thing we might want to change the colour of is the valueboxes. There is a color argument in the valueBox() function, whichhas slightly more colour choices than for the skin (15 instead of 6).Luckily, there is a purple in the list of valid colours. For all 6 ofthe value boxes in the app, we will need to add color = "purple" as anargument:

valueBox(  color = "purple",  ...)

which gives us:

Using the {fresh} package

The {fresh} package is an add-onpackage which helps you style your {shiny} apps, including apps builtwith {shinydashboard}.

{shinydashboard} is built usingAdminLTE, an open sourcedashboard and control panel theme built on top of Bootstrap. Therefore,functions in {fresh} used to customise {shinydashboard} themes followthe pattern adminlte_*. We will use the adminlte_color() tocustomise our default colours.

At the top of our app, we need create a new theme my_theme using thecreate_theme() function. In our theme, we are going to change thedefault adminLTE colour called “light-blue” to use our company colourinstead:

my_theme = create_theme(  adminlte_color(    light_blue = "#4898a8"  ))

We then need to tell {shinydashboard} to use this theme, by placing acall to use_theme() in the dashboard body.

dashboardBody(  use_theme(my_theme),  ...)

Now, if we change our value boxes to have color = 'light-blue', andremove any skin argument in dashboardPage, we end up with this:

Being able to use any custom colours is definitely a step up fromrelying on the built-in colour choices of {shinydashboard}. However,let’s take it even one step further and fully customise the look of our{shinydashboard} using CSS.

Using CSS

CSS (Cascading Style Sheets) is the language used to style HTML elementson any webpage. Normally when you build Shiny apps you don’t have toworry about CSS, which is one of the reasons why Shiny is so easy toget startedwith.But at some point you’re going to want more control of how your Shinyapp looks, and then it’s probably time to learn some CSS.

The main way of including CSS in your Shiny app is by creating a CSSfile (a file with the .css extension) and placing it in a foldercalled www/ in the same folder where your Shiny app lives. We willcall this file styles.css by convention.

We are going to use this CSS file to modify two things:

1. The font of the app: We want to use a custom font Prompt
2. The colour of the input slider bar: We want it to match the colourof the rest of the app

Once we have identified the elements and the associated properties wewant to modify, our CSS file ends up looking like this:

@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');.irs--shiny .irs-bar, .irs--shiny .irs-single {  border: #4898a8;  background: #4898a8;}body, h2, .main-header .logo {  font-family: 'Prompt', sans-serif;}

The first line imports our custom font called Prompt from GoogleFonts.

The next four lines select the elements of the slider we want to change,and set the border colour as well as background colour to be our companycolour (#4898a8).

The last four lines select the body text, our H2 heading, as well as theheader text in the top left corner and set the font to be our customfont.

Finally, for a {shinydashboard}, you will need to reference the CSS filein the dashboard body (similar to where we called use_theme() in the{fresh} example). With a stylesheet called “styles.css”, it would looklike this:

dashboardBody(  includeCSS("www/styles.css"),  ...)

Now our input slider has gone from this:

To this:

And our font from this:

To this:

Conclusion

There are many ways to customise a {shinydashboard} Shiny app. If youare content with a few different colours, you can stick to the defaultcolour palettes, but if you want to use custom colours you shouldconsider using the {fresh} package. If you want full control of the lookand feel of your dashboard, you might want to consider learning CSS andcreating your own stylesheet! Although, if you wanted to create a verycustom-looking dashboard, you might be better off not using{shinydashboard} at all…

For updates and revisions to this article, see the original post