CSS order of fallbacks

Panel
,
1

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?

2

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?
image

3

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.

image