panel template header colors not working.

[ea42gh]

ALL software version info

panel version 0.10.2

Description of expected behavior and the observed behavior

The templates do not handle header_color and header_background correctly.

• VanillaTemplate, Material template set the background, but not the color
• GoldenTemplate sets neither

header background set with '#ABCDEF' fails

Further information is at
https://discourse.holoviz.org/t/how-do-template-parameters-header-color-and-header-background-work/1613/2

Complete, minimal, self-contained example code that reproduces the issue

css = """ 
.title{color:white !important;}
"""
import panel as pn
pn.extension() #  pn.extension( raw_css=[css])  # workaround needed for setting the title color

tmpl = pn.template.MaterialTemplate(title='Test Material Template', header_color='yellow', header_background="rgb(59,54,81)")

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

[awesomebytes]

I misunderstood header_background to be... well, anything being a background instead of a color. I wanted to put a background image. I solved it by doing:

css = """ 
.mdc-top-app-bar{background-image: url('my_image.png'); !important; }
"""
pn.extension(raw_css=[css])

And that did the trick for me. While trying to find a solution with different search engine queries this closed issue appeared often, so I thought it would be worth it to put my solution here.