Unable to specify custom CSS

[jbednar]

Thanks for RISE 5.6.1; it's fabulous!

I'm trying to make my presentation match my corporate style guide, but am failing miserably. I've been able to select an existing theme like "sky" by editing the notebook metadata, which worked fine. But I need to be able to edit the theme itself, and so far for my notebook test.ipynb in test/ I've tried:

• copying sky.scss to test/customtheme.scss and specifying customtheme in the notebook metadata (doesn't seem to get loaded)
• copying sky.scss to test.css in my notebook's directory (to see if it would run, though it's probably not the right format as a template rather than actual CSS)
• creating a new file test.css containing only basic CSS like background-color: #0FF !important;

In no case can I get it to respect any of my custom files. For the latter case, I can see that it's loading test.css (below), but I can still see no effect. Is there something obvious I'm missing about how to make a custom theme or at least override the font family, color, and page background?

$ jupyter notebook test.ipynb 
[I 13:45:09.560 NotebookApp] Jupyter Notebook 6.1.1 is running at:
[I 13:45:09.560 NotebookApp] http://localhost:8889/?token=4abfa8b5c65c1661a9d4f5610e5b9422685c63c158786f91
[W 13:45:12.655 NotebookApp] 404 GET /nbextensions/jupyter_bokeh/extension.js?v=20200922134508 (::1) 14.02ms referer=http://localhost:8889/notebooks/test.ipynb
[I 13:45:13.400 NotebookApp] Kernel started: dd4a7400-4e8f-488f-9c2c-ca8aedb22325, name: python3
[W 13:45:13.546 NotebookApp] 404 GET /nbextensions/widgets/notebook/js/extension.js?v=20200922134508 (::1) 2.54ms referer=http://localhost:8889/notebooks/test.ipynb
[W 13:45:31.625 NotebookApp] 404 GET /nbextensions/rise/reveal.js/css/theme/anaconda20.css?v=20200922134508 (::1) 3.16ms referer=http://localhost:8889/notebooks/test.ipynb
[W 13:45:31.629 NotebookApp] 404 GET /notebooks/rise.css (::1): No such file or directory: rise.css
[W 13:45:31.629 NotebookApp] 404 GET /notebooks/rise.css (::1) 3.20ms referer=http://localhost:8889/notebooks/test.ipynb
[I 13:45:31.630 NotebookApp] 302 GET /notebooks/test.css (::1) 3.51ms

[jbednar]

I can see from lib/python3.7/site-packages/rise/static/reveal.js/css/theme/README.md that making a full theme requires compiling with Grunt/npm/etc. That seems appropriate for the project maintainer or for submitting a new theme, but is that what a user is meant to do just to pick a font and colors?

[damianavila]

Using test.css or rise.css should allow you to modify stuff, @jbednar (glad to see you again, btw!) Most probably you need to find the correct selector... on RISE we have several CSS sources playing together (notebook, reveal.js, your custom stuff), so it does not surprise me to see you are facing issues. Here is a link to some examples customizing CSS: https://github.com/damianavila/RISE/tree/master/examples Could you please try those examples and check if you can see the changes (and maybe build on top of those as examples).

That seems appropriate for the project maintainer or for submitting a new theme, but is that what a user is meant to do just to pick a font and colors?

I agree, this is why we provide an easy customization path: https://rise.readthedocs.io/en/stable/customize.html#adding-custom-css (you already saw this!), but there could be issues because of the things I outlined above.