Customize header panel

rh1 · November 6, 2023, 4:04pm

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 · November 22, 2023, 9:29am

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 · November 24, 2023, 3:23pm

Hi,

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

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

rh1 · November 24, 2023, 5:38pm

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 · November 25, 2023, 4:37pm

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 · November 25, 2023, 5:23pm

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 · November 25, 2023, 5:28pm

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 · November 25, 2023, 5:34pm

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 · November 25, 2023, 5:52pm

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

regards

Sidhdarthsidhu · March 26, 2024, 4:52pm

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

gpn · July 7, 2024, 10:22am

Hi @Marc

I tried to use these ideas in order to create a Card header with a close button for the Card that is always right-justified. I did not succeed. Instead the close-button is justified so it is at the end of the header text, instead of the head of the entire row.

Could you tell me what I did wrong?

indicator = pn.Spacer(
    width=20+12,  # height=20,
    sizing_mode='fixed',
    align='center',
)

header_text = pn.widgets.StaticText(
    value='New Analysis',
    margin=(2, 0, 0, 0),
    align=('start','center'),
)

close_button = pn.widgets.Button(
    icon='x',
    align=('end','center'),
)

editable_description = pn.widgets.TextInput(
    placeholder='describe your analysis here',
    disabled=False,
    max_length=255,
    sizing_mode='stretch_width',
)

card = pn.Card(
    editable_description,
    header=pn.Row(
        indicator,
        pn.Row(header_text,sizing_mode='stretch_width',align='center'),
        close_button,
        sizing_mode='stretch_width',
    ),
    collapsed=False,
    collapsible=True,
    sizing_mode='stretch_width',
)

Thank you

GPN

ahuang11 · July 8, 2024, 4:30pm

You might need to edit the CSS through styles or stylesheets

gpn · July 31, 2024, 9:32am

@Marc published a workaround (to the latest issue, of right-justifying a close button) at

github.com/holoviz/panel

TextInput does not stretch_width in a Card header

opened 12:00AM - 06 Jul 24 UTC

giladpn

need input from Philipp

#### ALL software version info Panel 1.3.8 panel_modal 0.4.0 Bokeh 3.3.4 pyt…hon 3.11.4 uvicorn 0.27.1 OS Ubuntu 22.04 Browser Edge 126.0.2592.81 (Official build) (64-bit) #### Description of expected behavior and the observed behavior Hi, and thanks as always for Panel. I am serving a panel server and the code that creates the App is below. My problem: the TextInput in the Card header refuses to stretch to the full width of the browser window, even though the Card itself does stretch full-width. Here is a screenshot from the browser, as you can see the text box does not stretch to full width: ![image](https://github.com/holoviz/panel/assets/60221624/2f0d4cf1-ee16-4529-adb5-3597a4566705) #### Complete, minimal, self-contained example code that reproduces the issue The server is set up with the following snippet ``` pn.serve( {'/app': createApp}, threaded=True, port=5000, allow_websocket_origin=["127.0.0.1:5000"], address="127.0.0.1", show=False, ) ``` and the code for the App is ``` import panel as pn class App: def __init__( self, ): pn.extension('modal') def __call__(self, *args, **kwargs) -> pn.WidgetBox: add_something_button = pn.widgets.Button( name="Add something", icon="plus") self.container = pn.WidgetBox( add_something_button, sizing_mode='stretch_width', ) pn.bind(self.add_analysis, add_something_button, watch=True) return self.container def add_analysis(self, event): indicator = pn.Spacer( width=20+12, height=20, sizing_mode='fixed', # align=('start', 'center',), ) header_text = pn.widgets.TextInput( placeholder='describe your analysis here', disabled=False, max_length=255, width_policy='max', sizing_mode='stretch_width', ) @pn.depends(header_text.param.value_input, watch=True) def header_value_changed(event): print("1->", event) @pn.depends(header_text, watch=True) def header_enter_pressed(event): print("2->", event) header_row = pn.Row( indicator, header_text, width_policy='max', sizing_mode='stretch_width', ) card = pn.Card( "A line with some text", header=header_row, collapsed=False, collapsible=True, width_policy='max', sizing_mode='stretch_width', ) self.container.append(card) def createApp(): ''' Creates the panel/bokeh server App ''' container = App()() return container.servable() ``` #### Screenshots or screencasts of the bug in action ![image](https://github.com/holoviz/panel/assets/60221624/2f0d4cf1-ee16-4529-adb5-3597a4566705)