Since upgrading to v1.4.2 (from v1.3.8) some of the custom css styling I have applied to widgets is no longer working. I am using a custom template which inherits from pn.template.BootstrapTemplate
and it looks like the bootstrap css at http://localhost:5006/static/extensions/panel/bundled/theme/bootstrap.css?v=1.4.2 is being used instead of the stylesheet I pass to the widget.
CSS = """
:host(.card),
:host(.accordion) {
background-color: green;
}
"""
# The card is displayed with a grey 'var(--bs-body-bg)' background
# rather than the desired green.
pn.Card(stylesheets=[CSS])
Does anyone know of a way to ensure custom css is always given preference without adding !important
to the end of each individual rule?
I wasn’t able to reproduce
import panel as pn
pn.extension()
CSS = """
:host(.card),
:host(.accordion) {
background-color: green;
}
"""
# The card is displayed with a grey 'var(--bs-body-bg)' background
# rather than the desired green.
pn.Card("Test", stylesheets=[CSS])
Perhaps clearing your browser cache could help?
Thanks for the reply. I’m still having the same issue after clearing my cache and using both Chrome and Edge.
Here is a more complete example.
"""app.py"""
import panel as pn
import param
CSS = """
:host(.card),
:host(.accordion) {
background-color: green;
}
"""
def main():
template = pn.template.BootstrapTemplate(title="CSS Test")
card = pn.Card("Test", stylesheets=[CSS])
template.main.append(card)
template.servable()
main()
If I serve that app with python -m panel serve .\app.py
I get the following.