Add extra_css for custom css injection

[paololazzari]

Fixes #1949.

I tested this locally by adding the following to testing/local-binder-mocked-hub/binderhub_config.py:

c.BinderHub.banner_message = 'This is headline <a href="#">news.</a>'
c.BinderHub.extra_css = """
.p-3.bg-light.shadow-sm.text-center {
    color: red;
}
"""

the style was loaded and the headline color changed.

[rgaiacs]

It looks good to me. Before merge, can we

• use if-clause in the HTML template
• document it for the Helm chart

[paololazzari]

@rgaiacs Thanks! Where should I document this for the helm chart?

[rgaiacs]

Where should I document this for the helm chart?

I believe that the traitlets are "magic" connected to the helm chart. But it is nice to add to

binderhub/helm-chart/binderhub/values.yaml

Lines 42 to 51 in c07d252

	config:
	# These c.BinderHub properties are referenced by the Helm chart
	BinderHub:
	# auth_enabled:
	base_url: /
	build_node_selector: {}
	# hub_url:
	# hub_url_local:
	use_registry: true
	KubernetesBuildExecutor: {}

like

config:
  # These c.BinderHub properties are referenced by the Helm chart
  BinderHub:
    ...
    # extra_css: |
    #  .p-3.bg-light.shadow-sm.text-center {
    #      color: red;
    #  }

Also mention it in the documentation

I would like to merge #1923 before this one.

[paololazzari]

@rgaiacs I did think about documenting extra_css in those two files, but I did not do it because I found that extra_footer_scripts was not documented there. I assumed whatever reasoning was behind not documenting extra_footer_scripts would hold true in this case too.

[rgaiacs]

Hi @paololazzari, thanks again for the PR. I noticed that this PR will only work in some scenarios. To enable custom CSS as CSS was originally design for, we also need #1952.

The scenario that the solution that you proposed will not work is when you try to change some style from https://github.com/jupyterhub/binderhub/blob/main/binderhub/static/js/index.scss. For example, I was trying to change the font used in the page but using your solution resulted in

[paololazzari]

My proposal was to add CSS, not replace the existing one

[rgaiacs]

Sorry @paololazzari for the delay to return to your pull request. #2012 created a minor conflict with this pull request. I checked and the conflict resolution is to accept both changes. Do you want to resolve the conflict or should I do it?

[paololazzari]

@rgaiacs Happy for you to do it