Notebook 7 and custom.css

Notebook
1

Previously for jupyter-notebook <7 one could use a custom.css file to adjust certain properties of the notebook, e.g., the width of the cells, the width of the complete notebook, and many others.

  1. Now, since the update to jupyter-notebook >=7 the custom.css file does not seem to do anything to the notebook anymore (it still does so to the jupyter-nbclassic). Is this proper behavior?
  2. If custom.css files are not working anymore for jupyter-notebook >=7, how can I get a notebook to fill all of my browser’s width?
    Thx. for your help.
3 Likes
2

Any update on this important matter? thxs.

3

@markb This could probably help:
https://jupyter-notebook.readthedocs.io/en/stable/custom_css.html

1 Like
4

custom.css is supported in Notebook v7, it was implemented in Load custom CSS by RRosio · Pull Request #6841 · jupyter/notebook · GitHub and examples (linked above) were added in Added example of custom css files by RRosio · Pull Request #6919 · jupyter/notebook · GitHub. If you experience any issues (something is not working for you) please open a bug report (with detailed reproduction instructions) in the issue tracker on Jupyter Notebook GitHub: Issues · jupyter/notebook · GitHub as this forum is not monitored for bug reports.

1 Like
5

I’m trying to change the color of matching parentheses in code cells using custom.css . The content I’ve added is：
/* Modify Hovered Parentheses Foreground Color for JupyterLab /
.jp-CodeCell .CodeMirror .cm-s-jupyter .CodeMirror-matchingbracket:hover {
color: red !important; / 设置匹配括号的颜色为红色 */
}
I want the matching parentheses to appear in red, but it’s not working.

6

Notebook 7 uses CodeMirror v6. .CodeMirror-matchingbracket is not the correct class name for CodeMirror 6. It should be .cm-matchingBracket. Then, your code includes :hover which means it would be only applied on hover. .CodeMirror is also an old class name, in CodeMirror 6 it is .cm-editor. The following works for me:

.jp-CodeCell .cm-editor .cm-matchingBracket {
   color: red!important;
}
1 Like
7

Thank you！
非常感谢！官方网站介绍的太不详细了。我的英语，真是感觉在大海捞针。。。