Custom CSS for jupyterhub-singleuser

JupyterHub
1

I’m trying to add some simple custom css to my jupyter images.
I’ve created .jupyter/custom/custom.css and put it in config dir, but when I`m trying to launch “jupyterhub-singleuser --custom-css”, it says its an unrecognized argument.
Is there any way to use custom css with singleuser instances?

jupyterhub-singleuser --version
4.1.5
2

--custom-css is JupyterLab, not JupyterHub flag - it requires appropriate version of jupyterlab to be installed.

I would personally try to set c.LabApp.custom_css = True in an appropriate configuration file (though of top of my head I cannot point you as to where you would place it in a JupyterHub setup).

1 Like
3

You can put the config in the same locations as you would when running jupyter-lab directly (e.g. in your home directory)

4

Probably I’m missing something. So maybe I`ll add more details.

I’m using JupyterHub 4.1.5, which uses dockerspawner:
c.JupyterHub.spawner_class = 'dockerspawner.DockerSpawner'
With mounted volume for users data:

c.DockerSpawner.volumes = {
      '/appl/user_settings/{username}': '/home/jovyan'
}

In that mounted dir I have my custom CSS:

cat /appl/user_settings/{username}/.jupyter/custom/custom.css
.jp-jupyter-icon-color[fill]{
  fill: #26f32e
}

I have added:
c.LabApp.custom_css = True
to my jupyterhub config, but that changes nothing.

Jupyter icon is still orange and my goal was to have it in different color, depending on my environment.

I almost forgot Dockerfile for my image:

FROM python:3.9.18-slim-bullseye

RUN pip3 install --upgrade pip && \
    pip3 install jupyterhub && \
    pip3 install jupyterlab && \
    pip3 install itables && \
    pip3 install ipywidgets && \
    pip3 install ipydatagrid && \
    rm -rf /root/.cache

RUN useradd -u 1000 jovyan
ENV HOME=/home/jovyan
WORKDIR $HOME
USER jovyan

CMD ["jupyterhub-singleuser"]
5

I have added:
c.LabApp.custom_css = True
to my jupyterhub config, but that changes nothing.

Again, JupyterHub and JupyterLab config files are two separate files. If you see c.JupyterHub in the file where you added c.LabApp, this is the wrong file.

I reall wish JupyterHub included an example for this in the documentation, it feels like this is the most frequent issue that users bump into when trying to configure JupyterLab on JuypterHub.

1 Like
6

My bad Michał.
I have added “c.LabApp.custom_css = True” to new file passed as config file when starting “jupyterhub-singleuser”. But that still does not change icon color.

7

I was able to enable custom css by adding ~/.jupyter/custom/custom.css & ~/.jupyter/jupyter_lab_config.py. Make sure you add c.LabApp.custom_css = True in the config file.