Customize header panel

[rh1]

Hi all,
kindly please advise how to make customization for header in panel for example adding more than 1 of logo or image, make background image, link, etc like in panel website

thanks

[rh1]

Hi @Marc

I just show you awesome panel, while waiting new version of awesome panel to be compatible with the latest panel, kindly please advise how did you do for adding some images/logo and text in this header

thanks and regards

[Theom]

Hi,

You have to provide content to the header, for instance:

image = ...
header = pn.Row(image)
pn.template.VanillaTemplate(
    title='Title',
    header=header
    ...
)

[rh1]

Hi @Theom , many thanks for your advise. It works, however is that any clue how custom the image for example width, height of the image since i try wth this code not working:
image = “https://www.markdownguide.org/assets/images/tux.png”
header = pn.Row((image),align=‘center’,width=100, height=20)
pn.template.VanillaTemplate(
title=‘Title’,
header=header,
logo = “assets/scipy.png”
).servable()

alignment also only center, couldn’t put as right or center, only left(the default)

thanks and regards

[Marc]

Hi @rh1

Let me have a look.

You have some great questions rh1. To take your questions to the next level please provide the code as
Minimal, Reproducible Examples in fenched code blocks.

If the question is very clea and has a minimal, reproducible code example, then its easier for the community to understand your exact problem, find an answer and have time to help the next in line

[rh1]

Hi @Marc , thanks for your reply. My previous reply already contain the minimal code, I will put it again in here, now able to adjust width and height, still pending the position of image:
Result

Code

import panel as pn
pn.extension()
image = “https://www.markdownguide.org/assets/images/tux.png”
header = pn.Row((image),align=‘center’,width=100, height=20)
pn.template.VanillaTemplate(
title=‘Title’,
header=header,
logo = “assets/scipy.png”
).servable()

thanks

[Marc]

The Basics - No Template

Lets take a small detour to learn how to make action and header bars in general.

Some of the key features to use are

• Row to layout components in a row
• Spacer and HSpacer to align things left, center and right.
• styles to change the text color or the background
• align to align widgets and panes.

from asyncio import sleep
from datetime import datetime

import panel as pn
from panel import HSpacer, Spacer

pn.extension()

image = "https://www.markdownguide.org/assets/images/tux.png"

file_menu = pn.widgets.MenuButton(
    name="File", button_type="primary", items=["Save"], width=60, margin=0, align="center"
)
help_menu = pn.widgets.MenuButton(
    name="Help", button_type="primary", items=["About"], width=60, margin=0, align="center"
)


async def timer():
    while True:
        yield datetime.now().strftime("%H:%M:%S")
        await sleep(1)


action_bar = pn.Row(
    Spacer(width=20, sizing_mode="fixed"),
    file_menu,
    help_menu,
    HSpacer(),
    pn.pane.PNG(image, height=30, width=50, margin=0, sizing_mode="fixed", align="center"),
    HSpacer(),
    pn.panel(timer, width=75, styles={"color": "white"}, align="center"),
    sizing_mode="stretch_width",
    styles={"background": "var( --panel-primary-color )"},
)

action_bar.servable()

I added the timer just for fun. I’m not sure I would add that in a real app.

[Marc]

The Solution - With a Template

from asyncio import sleep
from datetime import datetime

import panel as pn
from panel import HSpacer, Spacer

pn.extension()

image = "https://www.markdownguide.org/assets/images/tux.png"

file_menu = pn.widgets.MenuButton(
    name="File", button_type="primary", items=["Save"], width=60, margin=0, align="center"
)
help_menu = pn.widgets.MenuButton(
    name="Help", button_type="primary", items=["About"], width=60, margin=0, align="center"
)

async def timer():
    while True:
        yield datetime.now().strftime("%H:%M:%S")
        await sleep(1)

action_bar = pn.Row(
    Spacer(width=20, sizing_mode="fixed"),
    file_menu,
    help_menu,
    HSpacer(),
    pn.pane.PNG(image, height=30, width=50, margin=0, sizing_mode="fixed", align="center"),
    HSpacer(),
    pn.panel(timer, width=75, styles={"color": "white"}, align="center"),
    sizing_mode="stretch_width",
    styles={"background": "var( --panel-primary-color )"},
)

pn.template.VanillaTemplate(
    title="Panel App with Header Content",
    header=[action_bar],
    logo = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/SCIPY_2.svg/512px-SCIPY_2.svg.png?20200904111722"
).servable()

Try playing around with this example.

[rh1]

hi @Marc , awesome. many thanks for your example how to customize the header panel.

regards

[Sidhdarthsidhu]

Hi @Marc thanks for the examples, Is it possible to center the template title?