How to setup local style sheet

Dash Python
1

I have been using the plotly/dash-salesforce-crm example to setup most of my dashboard. I am grateful for this example because even for someone without any front end knowledge, I am able to get a working dashboard.
The problem I am having is that, being in China, I found the layout can be broken, if I don’t have a vpn setup. I suspect this is due to not able to load the online stylesheet. Therefore, I want to set up the style element as a static file locally, the style sheet I am using right now are the following: (I have no idea how they work, I just copy and paste from the example)

    html.Link(href="https://use.fontawesome.com/releases/v5.2.0/css/all.css",rel="stylesheet"),
    html.Link(href="https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css",rel="stylesheet"),
    html.Link(href="https://fonts.googleapis.com/css?family=Dosis", rel="stylesheet"),
    html.Link(href="https://fonts.googleapis.com/css?family=Open+Sans", rel="stylesheet"),
    html.Link(href="https://fonts.googleapis.com/css?family=Ubuntu", rel="stylesheet"),
    html.Link(href="https://cdn.rawgit.com/amadoukane96/8a8cfdac5d2cecad866952c52a70a50e/raw/cd5a9bf0b30856f4fc7e3812162c74bfc0ebe011/dash_crm.css", rel="stylesheet"),

and for the banner, I use these:

external_css = [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",  # Normalize the CSS
    "https://fonts.googleapis.com/css?family=Open+Sans|Roboto"  # Fonts
    "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
    "https://cdn.rawgit.com/TahiriNadia/styles/faf8c1c3/stylesheet.css",
    "https://cdn.rawgit.com/TahiriNadia/styles/b1026938/custum-styles_phyloapp.css"
]

You can probably tell by now that I have absolutely no idea how they work, and I have tried to search some of the forum result, but can’t really tell how to get them to work either. Can someone help me please?

2

I would suggest visiting each of those links in your browser (assuming your VPN allows it?) and copying everything into local CSS files. You then just need to put those files into a folder called assets in the same location as your main app script, Dash will detect the files and link them automatically. You can then delete the html.Link from your code, along with the external_css stuff. See the Dash documentation for more details on how to link local CSS.

1 Like
3

Thanks for your help! Happy to report that it works!

2 Likes