Request for Guidance on Customizing JupyterLab UI Layout


I would like to express my appreciation for the contributions of this community, and I find JupyterLab to be a powerful tool. Currently, I am looking to deeply customize the UI, including making adjustments to the entire project’s layout, such as adding a new header section. However, I’ve noticed that all elements seem to have their height and top properties hard-coded inline with JavaScript, rather than being defined in CSS.

I am unsure about how to make these adjustments, or if I might have misunderstood the development approach. Could you please provide some guidance or tips on how I can achieve the desired UI customization? I would greatly appreciate it.

Attached is an image illustrating the desired header effect, along with the inline styles I observed in the browser’s developer tools (F12).

That’s a nice design! It should all be possible.

The values you highlight are not hard-coded - they are computed by the lumino layout dynamically based on the CSS styles. In your particular example of #jp-top-panel it comes from min-height which can be overriden in theme extensions:


A very few values are hard-coded and those should be changed (contributions via pull requests welcome).

Note: there is a template for theme extensions and a theme editor which might help to kickstart theme creation (also see this blog post). Perusing some of the existing themes on GitHub and on PyPI can be helpful too.


I was too eager to apply this feature that I forgot to reply, thank you again.

1 Like


Thank you for your assistance. I’ve managed to implement my design in the development environment. However, I’ve noticed that when packaging the project into a .whl file using python -m build, these changes did not get incorporated.

Specifically, due to some layout modifications, I’ve made alterations to /packages/application/src/shell.ts. Here’s what I did:

const spinqHeaderPanel = new Panel();
.... something like link and logo handle
rootLayout.insertWidget(0, spinqHeaderPanel);

Despite these changes, they were not reflected in the packaged .whl file. I’m at a loss as to why this is happening and would appreciate any insight or guidance on how to resolve this issue.

Thanks in advance for your help!
Best Regards,

I’ve taken another look at your response and given it some careful thought. I’m wondering if these minor features also require a plugin for implementation, followed by packaging the plugin and installing it in the production environment. The main issue is that there are quite a few places where I have made subtle structural changes.

Do you have any other suggestions that could prevent me from having to create and install so many .whl packages? Have I misunderstood something? Thank you for your patience.

Best Regards,

1 Like

I would open a separate issue on Issues · jupyterlab/jupyterlab · GitHub for each change that required you to modify the code directly. If you have suggestions on how to make it easier to customize the UI in themes/extensions you can then open a pull request directly, if you do not know how to achieve it lets brainstorm it together on github.

1 Like