Override Custom Styling Sheet

Dash Python
1

Hi, I am trying to figure out how to override specific styling attributes on my multi-page app. An example of this would be to change the background color or text color. At this point I am trying to figure out the best way to go about doing some specific customizations for our app. I tried creating an assess folder and testing out changing h5 colors and was not able to override the theme template I am using (external_stylesheets=[dbc.themes.SANDSTONE]). What is the best process of doing this. The app I am working on can be found here: GitHub - oss-aspen/8Knot: Dash app in development to serve Project Sandiego visualizations.

2

Hello @cdolfi,

Would you be able to provide a snippet of your css code?

3

@jinnyzor I just put in a simple file in the assess folder just to text if I could do it. I used:

h1, h2, h3, h4, h5, h6 {
    color: hotpink !important;
}

and external_stylesheets=[dbc.themes.SANDSTONE], in app

4

Hmm, mine loads properly.

You should inspect the header and make sure it is including your style sheet in the layout.

Something like this:

image
image769Ă—52 3.92 KB

5

And it should be “assets” not “assess”

6

I have it as assets locally. What should I do in the app.py to distinguish to look at the assets folder even with the external_stylesheets=[dbc.themes.SANDSTONE]?

7

What does your code look like, also, on the browser page, right click and inspect:

image

Then look in the tag for the sandstone/bootstrap and under it you should find your css file.

8

I just realized my assets folder was not in root facepalm thanks for the help!

2 Likes
9

You can give a different path if you absolutely need to. :slight_smile: :wink: