✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Modify CSS and Load Locally in Dash App

I’m using the css provided in Dash Getting Started here: https://codepen.io/chriddyp/pen/bWLwgP.css

I like it, but want to bring in my own custom font. I’m able to load it using the following:

base_css = 'https://codepen.io/chriddyp/pen/bWLwgP.css'

external_css = [base_css, '/static/local.css']

for css in external_css:
    app.css.append_css({"external_url": css})

@app.server.route('/static/<path>')
def static_file(path):
    static_folder = os.path.join('/var/www/FlaskApp/FlaskApp/', 'static')
    return send_from_directory(static_folder, path)

However, when I save the base_css (again provided by Dash Get Started) as an actual .CSS and load it through my ‘/static/local.css’, it doesn’t work for me. Thoughts on why, is it format?

Hey,

The dash app automatically go look for css in the ‘assets’ folder, at the same level as your server. So you could theorically simply have this structure:

app.py
assets
     my_css.css
     my_js.js

check this page for more info: https://dash.plot.ly/external-resources
They also explain in which order the different css are loaded, etc.

2 Likes