Hi, just started learning Dash/Plotly and have a question about linking external CSS. Before I write my question - yes, I have read the documentation at Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly, but I’m still having trouble.
I’m not new to Python at all, but I’m completely new to HTML/CSS and web dev in general. I went online to a CSS generator for a toggle switch to custom style one, and I saved the CSS file in an “assets” folder in the same directory as my app, and I put the CSS file in that folder.
In my code, I’ve saved “/assets/toggle_switch.css” to a variable “css_file” in my code, and added that to the constructor of the app.
Here is the CSS file:
Here is the code:
#!/usr/bin/env python3
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input, State
import plotly
import plotly.graph_objs as go
#css_files = {'href': '/assets/toggle_switch.css', 'rel': 'stylesheet'}
css_files = '/assets/toggle_switch.css'
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY, css_files])
switches = dbc.Checklist(
id="switches-input",
className='onoffswitch-checkbox:checked + onoffswitch-label onoffswitch-switch'
)
app.layout = dbc.Container(
fluid=True,
children=[
switches
]
)
if __name__ == '__main__':
app.run_server(debug=True)
So, being as I’m a CSS/HTML noob, what exactly am I supposed to change in the code to get the dbc.Checklist() component to take on the style of the toggle switch from the CSS file?
As it stands now, when I run the server it brings up the page like this:
Thanks in advance!