Change Sidebar Color in FastListTemplate

Panel
1

Hello,

I would like to change the color of the sidebar background in the Fast themes.
The parameter background_color changes the main area and header_background changes the header color.
Which parameter do I have to use to change the sidebar background color? Up to now it stays always white or dark (depending on theme).

Thank you for the support!

2

Hi @wolfgangh

Welcome to the community.

If you want a gray sidebar and white main area you can set main_layout=None. Its becoming my favorite.

image
image1049×401 6.6 KB

image
image1047×402 6.86 KB

import panel as pn

pn.extension(sizing_mode="stretch_width")

TEXT = "Panel"

length = pn.widgets.IntSlider(value=len(TEXT), end=len(TEXT), name="length")

def text(value):
    return "⭐"*value

layout = pn.Column(length, pn.bind(text, length))

pn.template.FastListTemplate(
    site="Panel", title="App", sidebar=["Description"], main=[layout], main_layout=None
).servable()
1 Like
3

If you want more control you can use css

RAW_CSS="""
.sidenav#sidebar {
    background-color: yellow;
}
"""

image
image636×862 7.61 KB

import panel as pn

pn.extension(sizing_mode="stretch_width")

TEXT = "Panel"

length = pn.widgets.IntSlider(value=len(TEXT), end=len(TEXT), name="length")

def text(value):
    return "⭐"*value

layout = pn.Column(length, pn.bind(text, length))

RAW_CSS="""
.sidenav#sidebar {
    background-color: yellow;
}
"""

pn.template.FastListTemplate(
    site="Panel", title="App", sidebar=["Description"], main=[layout], main_layout=None, raw_css=[RAW_CSS]
).servable()