For a project I'm trying to create a web application dashboard with Dash.
Because I have multiple versions of the web app with different layouts, I want each version of my app to point towards a specific .css file, stored in my assets folder, to use.
I don't want to delete the other .css file which I use for a different version but resides in the same project folder. The other .css file should be basically ignored.
project
│ app.py
│ app_custom.py
│
└───/assets
│ style.css
│ custom_style.css
So if I run app_custom.py, I want the app to only use the style_custom.css.
Below my code:
# external css/js files are loaded before .css files in /assets
external_stylesheets = [dbc.themes.BOOTSTRAP,
{
"href": "https://fonts.googleapis.com/css2?"
"family=Lato:wfght@400;700&display=swap",
"rel": "stylesheet",
}
]
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
<div>My Custom header</div>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
<div>My Custom footer</div>
</body>
</html>
'''
app.layout = html.Div(
dbc.Button("Success", color="success", className="mr-1")
)
if __name__ == "__main__":
app.run_server()