Hello,
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.
5 Likes
I was too eager to apply this feature that I forgot to reply, thank you again.
1 Like
Hello,
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,
eason
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
Thanks for opening this thread, @eeeeeeeason. After looking for some in depth tutorials on how to deeply customize the UI (in addition to the official docs), this was essentially the only discussion I’ve found.
We’ve experienced difficulty customizing the UI to the extent demonstrated here due to the complexity involved (and without a substantial time investment).
In addition to the resources mentioned above and the official docs, are there any tutorials to walk through how something like @eeeeeeeason designed could be implemented?
FWIW, we’ve successfully created an extension and customized the UI somewhat, but deep UI customization has proved more difficult. Of course, good things all take time.
Thanks so much in advance.
We’ve experienced difficulty customizing the UI to the extent demonstrated here due to the complexity involved (and without a substantial time investment).
FWIW, we’ve successfully created an extension and customized the UI somewhat, but deep UI customization has proved more difficult. Of course, good things all take time.
I would suggest asking specific questions about the customizations you are attempting to make and then we can incorporate answers to these into JupyterLab documentation. Another way to ask a specific question about customizing JupyterLab with use of extensions is opening an issue on GitHub - jupyterlab/extension-examples: JupyterLab Extensions by Examples. If you cannot share the details publically feel free to contact me directly and we could arrange something.
2 Likes
Thank you so much, @krassowski. I will send you a direct message.
