Adding a COVID-19 Dashboard Sidebar

Adding a COVID-19 Dashboard Sidebar

Here’s how:

(Yes, it’s a little more involved than a single Theme Component, but you will be able to re-use this setup for other purposes.)


Install Custom Layouts & Custom HTML widget:

Add these to your app.yml

- git clone
- git clone

Optionally, if you are using Topic List Previews, use my special branch to facilitate sidebars*:

- git clone -b "replace_masonry_with_CSS_grid"

rebuild as usual:

./launcher rebuild app


You will first need to find an appropriate dashboard.

I’ve found three options:

  • Global:
    • John Hopkins University :
    • Avi Schiffmann’s popular site
  • UK:
    • Public Health England

Happy to add other suitable suggestions to this post if you Reply with them below.

Put something similar to the following HTML in your custom HTML widget setting, using URL you have chosen:

<div class="corona-dashboard" style="text-align: center"><h5>COVID-19 Dashboard</h5></div><div style="height: 600px; overflow: hidden"><iframe src="" height="600px" class="corona-dash"></iframe></div>

Add the views in setup:

Configure the width:

Make sure this is off:

You can use the left bar with a similar approach.

Customise to taste.

*(note there’s a a slight sacrifice here, this will currently introduce a limit of how far you can scroll in Chrome based browsers as there is a non-functional limitation affecting CSS Grid which is currently being worked on by the browser dev team).