CODEWITHSUNDEEP
pythoncssplotly-dash
David Skarbrevik
David Skarbrevik

Reputation: 775

Python Dash: Custom CSS

I want to feed a CSS stylesheet or a <style> block into a Python Dash app. I've attempted to do both below, but neither works for me. The app loads fine, but the text remains black, not green.

import dash

from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from flask import send_from_directory



# define the app
app = dash.Dash()

app.head = [html.Link(rel='stylesheet', href='./static/stylesheet.css'),
    ('''
    <style type="text/css">
    h1 {
        color:green;
    }
    </style>
    ''')]

app.layout = html.Div(html.H1('Hello World!'))


if __name__ == '__main__':
    app.run_server(debug=True)

and inside ./static/stylesheet.css is a file with only this:

h1{
  color:green;
}

I've tried having just the stylesheet or just the <style> tag but neither of those turns the h1 tag green either.

Here is the research I've done to try to solve my issue:

https://github.com/plotly/dash/pull/171

https://dash.plot.ly/external-resources

https://github.com/plotly/dash-recipes/blob/master/dash-local-css-link.py

The only thing I haven't tried (that those links suggest) is to load from an external link (CDN). However I want to be able to load this app offline so that isn't an option.

Upvotes: 21

Views: 51396

Answers (4)

Niko Fohr
Niko Fohr

Reputation: 33770

Local assets (.css, .js)

Starting from Dash v0.22, you would include local CSS files as follows

  1. make a assets folder in the same directory as your app.py. Put all your .cssand .js files there.

  2. Initialize the app object by giving the __name__ as the first argument; use app = dash.Dash(__name__) instead of app = dash.Dash(). (reasoning)

  3. Now Dash will automatically load your CSS and JS files. To force a correct loading order (especially important with CSS), it is recommended to name your files as 01_first.css, 02_some_customization.css, .. 25_load_this_last.css. (the loading order is always alphanumerical)

Note: Your custom CSS will be included after the Dash component CSS (source).

Inline CSS

For inline CSS, you may use the style parameter of the html.Component.

  • Give the CSS as a python dictionary
  • Use camelCase keys; text-align -> textAlign, etc.

For example:

import dash
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div(
    [html.H1('Demo'), html.H3('Text')],
    style={
        'textAlign': 'center',
        'border': '1px solid red',
    },
)

Upvotes: 11

Ravi Singh
Ravi Singh

Reputation: 291

You are not serving the css. The right way is to add following lines to your app.py 

app = dash.Dash()
server = app.server
app.config.suppress_callback_exceptions = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

and serving your css folder using the following flask code, add it to your index.py

@app.server.route('/assests/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'assests')
    return send_from_directory(static_folder, path)

This will serve everything under assests folder. Now suppose you have internal folder like css, fonts. You can refer your css using the following. 

app.layout = html.Div([
    html.Div([
        dcc.Location(id='url', refresh=False),
        html.Link(
            rel='stylesheet',
            href='/assests/css/bootstrap.css'
        ),
        html.Link(
            rel='stylesheet',
            href='/assests/css/styles.css'
        )
    ]),
    html.Div(id='page-content'),

])

Upvotes: 4

Paul D.
Paul D.

Reputation: 610

If you look at the dash-recipies on GitHub it gives you the syntax for using a local css file. The only thing that I needed to change to make this work was in the @app.server.route. Instead of: 

@app.server.route('/static/<path:path>')

I used: 

@app.server.route('/static/<path>')

Upvotes: 4

Cooper
Cooper

Reputation: 126

This is part of a project I did and it worked for the style

app.layout = html.Div(
style={'backgroundColor': 'black'},
children=[
    html.H1('html code')])

Upvotes: 7

Related Questions