How to add static assets
This guide shows you how to add static assets to your dashboard. Static assets are images that you would like to show in your dashboard, or custom CSS and JS files with which you would like to enhance/change the appearance of your dashboard.
To add images, custom CSS or JS files, create a folder named assets
in the root of your app directory and insert your files.
Assets included in that folder are automatically served after serving Vizro's static files via the external_stylesheets
and external_scripts
arguments of Dash.
The user's assets
folder thus always takes precedence.
├── app.py
├── assets
│ ├── css
│ ├── **/*.css
│ ├── images
│ ├── icons
│ ├── collections.svg
│ ├── app.svg
│ ├── logo.svg
│ ├── favicon.ico
Dash Bootstrap Themes
Note that Vizro is currently not compatible with Dash Bootstrap Themes. Adding a Bootstrap stylesheet will have no visual effect on the components included in Vizro.
Change the favicon
To change the default favicon (website icon appearing in the browser tab), add a file named favicon.ico
to your assets
folder.
For more information, see the Dash documentation.
Add a logo image
Single logo
If an image named logo.<extension>
is present in the assets folder, Vizro automatically incorporates the logo in the top-left corner of the dashboard.
Supported image extensions: apng
, avif
, gif
, jpeg
, jpg
, png
, svg
, and webp
Theme-specific logos
You can also supply two images named logo_dark.<extension>
and logo_light.<extension>
to switch logos
based on the theme (dark or light).
Note that both logo_dark.<extension>
and logo_light.<extension>
must be provided together, and they cannot be
provided if a single logo.<extension>
is also provided for both light/dark themes.
The valid configurations are as follows:
- Single logo: Provide only
logo.<extension>
, which is used for dark and light themes. - Theme logos: Provide both
logo_dark.<extension>
andlogo_light.<extension>
for dark/light themes. Do not providelogo.<extension>
. - No logo: No logo images provided.
Change the assets
folder path
If you do not want to place your assets
folder in the root directory of your app, you can
specify an alternative path through the assets_folder
argument of the Vizro
class.
from vizro import Vizro
import vizro.models as vm
page = <INSERT CONFIGURATION HERE>
dashboard = vm.Dashboard(pages=[page])
app = Vizro(assets_folder="path/to/assets/folder").build(dashboard).run()
Note that in the example above, you still need to configure your Page
.
See more information in the Pages User Guide.
Include a meta tags image
Vizro automatically adds meta tags to display a preview card when your app is shared on social media and chat
clients. To include an image in the preview, place an image file in the assets folder named app.<extension>
or
logo.<extension>
. Vizro searches the assets folder and uses the first one it finds.
Image types of apng
, avif
, gif
, jpeg
, jpg
, png
, svg
, and webp
are supported.
Order of serving CSS files
CSS properties will be applied with the last served file taking precedence. The order of serving is:
- Dash built-in stylesheets
- Vizro built-in stylesheets
- User assets folder stylesheets
Within each of these categories, individual files are served in alphanumeric order.