RISE should provide a mechanism to add custom CSS and custom JS

[damianavila]

RISE should provide a mechanism to add custom CSS and custom JS

[adl]

Another option is start the notebook with

%%HTML
<link rel="stylesheet" type="text/css" href="custom.css">

or in case it is just a style for the current notebook, an inline style:

%%HTML
<style>
    /* style for notebook and presentation */
    p { color: green; }
    /* style for presentation only */
    .reveal p { color: red; }
</style> 

[damianavila]

Thanks for the suggestion @adl, but I feel that ones are still workaround... we need to provide a mechanism for styling customization... a rise.css could be a solution. We probably need to:

1. create an empty rise.css in profile_whatever at installation time (remember to not overwrite a previous rise.css). In case of no profile (default) just add it to profile_default.
2. load rise.css in main.js next to the other css files.
3. make the enable_custom_css (or whatever name) a config option through the ConfigManager to load rise.css by default, but give the option to not load it (which gives you the uncustomized slides again).

[fpliger]

As an user I'd prefer @damianavila suggestion. That said, @adl is something already ready to use, so why not list it as a valid option?

There's also another evolution somehow related to customization. Let's say an user (like me jeje) wants to:

1. add a fixed elements to the presentation (i.e. a nice footer)
   or
2. customize some behaviour/logic (like add new keybindings, etc..).

The solution now is to tweak with RISE main js file (unless I'm missing something, which can easily be the case).

@damianavila proposal could also apply to load a rise.js file for this kind of things..

More specifically to issue 1, a maybe cleaner solution would be to add some empty divs to the ".reveal" element(s) that user can hook to easily customize slide elements like footers, headers, etc.. (I already have some work done to get this... before opening an issue and a related PR I'd like to know others opinion)

[damianavila]

@damianavila proposal could also apply to load a rise.js file for this kind of things..

I am delighted by the idea to have a rise.js too to hack on the js side... it crossed my mind several times in the past.

More specifically to issue 1, a maybe cleaner solution would be to add some empty divs to the ".reveal" element(s) that user can hook to easily customize slide elements like footers, headers, etc.. (I already have some work done to get this... before opening an issue and a related PR I'd like to know others opinion)

Not sure about that, maybe it is the path... probably I need a prototype to get a better idea/sense... so open your PR when you are ready to do it...

[pdonorio]

I am delighted by the idea to have a rise.js too to hack on the js side

+1 as it would help to create a custom configuration for reveal.js (e.g. keyboards shortcuts)

[fcremo]

I'm trying out RISE with the bash kernel and the solutions proposed here don't work (unless I'm missing something) because I can't execute python code to use ConfigManager to configure RISE.
I'm not sure but I think it would it be possible to put the configuration in the notebook metadata. That should work with every kernel.
There's still the problem of changing settings between different slides (e.g. to change the transition animation), but it's a start. To solve this problem one workaround could be to include a new "slide type" that contains configuration parameters.

[damianavila]

I'm trying out RISE with the bash kernel and the solutions proposed here don't work (unless I'm missing something) because I can't execute python code to use ConfigManager to configure RISE.

Yep, that;s reasonable....

I'm not sure but I think it would it be possible to put the configuration in the notebook metadata. That should work with every kernel.

In fact RISE, work with any kernel... it is kernel agnostic... only the installation is pythonic... but it can be installed in several ways and with several language, it is just a matter to write the tool to put the files in the correct places...

Can you start another issue where we can discuss non-pythonci alternatives installations? Thanks!

There's still the problem of changing settings between different slides (e.g. to change the transition animation), but it's a start. To solve this problem one workaround could be to include a new "slide type" that contains configuration parameters.

A config element in the notebook itself is interesting... the question is what kind of ID we should built on top of that... or maybe just left people configure there using text (which is not much better than configure outside the notebook...
Again a new issue to discusses a high level UI in the notebook is welcome!

[jason-s]

see for example PR #200 (Add companion .css file)

One issue is version control: if you put an .ipynb file into version control, it makes sense to have CSS also put into version control along with it.

I will have to try the %%HTML hack again, I thought I did already without success, but maybe I missed something.

[pdonorio]

Hello, sorry to bother, but do we have any update here?

I see that there are now some instructions for custom code in the repo homepage. I didn't notice that one year ago, am I right?

[damianavila]

I see that there are now some instructions for custom code in the repo homepage. I didn't notice that one year ago, am I right?

Still not a simple way to further customize thing on the css... but you can actually customized a lot of the reveal.js options with the instructions provided in the README that you linked.

[damianavila]

As you see there are some PRs opened but I did not have time to deal with them yet.

[pdonorio]

Thanks for the clarification. Is that custom code enough for the keybindings instead?

[damianavila]

If you want to customize keybindings you need to do it in the source for now... we have been discussion about a rise.js or custom.js to customize the js behavior but we don't have that functionality yet...

[mbewley]

Please consider the following use case: You're in front of a lecture room full of students, 5 mins before the start, and find that the resolution of the provided projector is very low. You quickly need to fiddle with the css to adjust font sizes etc. for your presentation, so it works properly (may have been a real scenario ;-) ). Luckily I had CSS in a cell in the notebook which, while considered poor style, is IMHO the best way to bind specific settings to a presentation.

• I like a custom css that gets loaded by the notebook for a particular style you want to reuse (e.g. corporate presentations).
• I like css specific to a given presentation to be embedded directly in that presentation, so it doesn't get lost. Otherwise every time you tweak the custom.css, it will ruin the look of the rest of your presentations.

So one solution that is pretty close to what already exists, would be:

• A custom.css template, that has stubs for typical things users might want to tweak (very useful for getting newbies using it - I've been tinkering and finding out the hard way)
• A special "css" cell type (or just the HTML magic of @adl 's comment), as an official recommendation for custom css for a particular notebook, rather than discouraging it as poor style.

[damianavila]

CSS customization is provided by #296 and #310, but I will keep this open until we offer some entry point for minor JS customizations.