How to work with custom css file in dash app

Dash Python
1

I am developping dash app in python.

To use my custom css file, I followed the recommended structure between app.py and assets folder.

However, it does not work when app start.

To apply it to my app, I have to go to custom.css and ctrl+s (save actual state)

Here is the structure.

- app.py
- assets/
    |-- custom.css

external_style = [dbc.themes.MATERIA,dbc.icons.FONT_AWESOME]
appDash = dash.Dash(__name__,
                # Do not show exceptions
                suppress_callback_exceptions=True,
                # Use specific CSS to make your application looks wonderful
                external_stylesheets=external_style,
                
                url_base_pathname='/my_super_app/',
                # use_pages=True
                # Web application name
                    # Title []
                )

I think there is some conflict with external_style = [dbc.themes.MATERIA,dbc.icons.FONT_AWESOME]

But it does not work when I did : external_style = [dbc.themes.MATERIA,dbc.icons.FONT_AWESOME,‘path_to_custom_css’]

How can I solve it ?

2

Hi @Papa ,

I think by creating assets folder and put your css files is the recommended action.

Try to double check your custom.css’s content.

Or maybe there is same CLASS or ID both in your custom.css and dbc.themes.MATERIA that will be replaced by last CSS.

If it is all good, try to comment external_stylesheets=external_style, line , to make sure your custom.css works properly when the app start without calling external_stylesheets.

... 

# Use specific CSS to make your application looks wonderful
# external_stylesheets=external_style,

...

If you want to put your custom.css in external_style put it like this
external_style = [dbc.themes.MATERIA,dbc.icons.FONT_AWESOME,‘/assets/custom.css’].

Make sure your custom root path is your project folder.

Hope this help.

1 Like
3

Hiya @farispriadi , you are right , creating an assets folder indeed is the recommended action for integrating an external stylesheet within your dash application.
I was building , dash’s sample app gallery applications within julia language as as learning endeavour and was stuck on styling for a whole day, as to why my external stylesheets weren’t loading.
But a little deep dive with the dash documentation, was delighted to find the solution that worked.

2 Likes
4

Thanks for your message.

Actually, the problem was in my css file.

There is some section of css code was not applied correctly.

After correcting this section of code, it works correctly !

2 Likes