How do I use Dash to add local css?

Dash Python
23

I’m looking to update this behaviour (adding external CSS and JS) in this PR: https://github.com/plotly/dash/pull/171. Feedback welcome! (Please comment on the PR itself)

1 Like
24

i try all like u say and copy this code. …but still not can loading localhost css

25

I love Dash but as a data scientist with no CSS experience this whole CSS thing is very frustrating particularly when there are no clear examples of how use local CSS files. In R Shiny stuff just works and don have to worry about style sheets. But I prefer Python and was hoping Dash could be my salvation.

I want to recreate this bootstrap demo (https://getbootstrap.com/docs/4.0/examples/dashboard/) in Dash but cant get past the first hurdle of using the appropriate CSS’s. This or a simple demo showing how to use different CSS locally would be great. I’ve tried the code snippets without any success :frowning:

4 Likes
26

app.head seem not support now,
you can try to use

html.Link(
    href='https://XXX.css',
    rel='stylesheet'
)

in app.layout

for local css, you need to add a static folder and add the code

import flask    
import os
STATIC_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')

@app.server.route('/static/<resource>')
    def serve_static(resource):
        return flask.send_from_directory(STATIC_PATH, resource)
27

Here’s a slightly easier way… if you have a CSS file in assets/main.css then you can use the static_folder argument of dash.Dash() to serve up that folder, and then use html.Link to reference it, with an href that starts with / to make it relative to the root of your server:

app = dash.Dash(__name__, static_folder='assets')
app.scripts.config.serve_locally=True
app.css.config.serve_locally=True
app.layout = html.Div([
    html.Link(href='/assets/main.css', rel='stylesheet'),
    .....
])
5 Likes
28

Note that when you do it this way the initial name param for the Dash class is mandatory, as it needs to pass it onto Flask, which needs it to work out where whereabouts on the file system assets/ is relative to.

So for a standalone module like an app.py script, you would want this (as in @nicolaskruchten’s example):

app = Dash(__name__, static_folder='assets')

If you’re code is within a package however, then as suggested by the Flask docs, you want to do:

app = Dash('yourpackage', static_folder='assets')

or

app = Dash(__name__.split('.')[0], static_folder='assets')

2 Likes
29

Thanks! I’ve edited my comment above to remove this confusion :slight_smile:

edit: actually no, your comment is very helpful in context, so I’ve reverted my change to leave it the way it was when you replied!

3 Likes
30

Here again an example for pip3/Ubuntu users (works even with global installed packages). Search for the dash_core_components folder:

usr/local/lib/python3.5/dist-packages/dash_core_components/

then create your test.css in that directory and insert the following line at the beginning of your code (before the actual app, and leave: ‘relative_package_path’ unchanged , took me a while to figure that one out :))

dcc._css_dist[0][‘relative_package_path’].append(‘test.css’)

next insert these two lines after you created your app (actually the first one should be sufficient):

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

Then it should work.

1 Like
31

Randy’s solution worked for me!
Thanks a lot!

32

This is getting fixed in https://github.com/plotly/dash/pull/286

2 Likes
33

We have incorporated everyone’s feedback in our latest release, announced here: Dash version 0.22.0 released!. It is now easy to add local CSS and JavaScript and we have provided an official way to override the Dash Index Template.

For more, read the official docs: https://dash.plot.ly/external-resources

If you have any particular questions about this, please create a new issue. Many thanks to everyone for their feedback on this issue :heart:

5 Likes