Hide Pluto.jl cell in static html with CSS

Tooling Pluto
1

:wave: Hello

I use Pluto notebooks to teach.
In the static html versions I make available for the students, I would like to hide certain cells (for example, the one with a @htl block with my CSS tricks).
I am trying this:

pluto-cell#2d509cd9-2838-48c9-951e-01853b0d2dab {
    display: none;
}

But it doesn’t work…
Anyone can help me?

Thank you!

2

Can you post an example of a cell you would like to hide?

3

Sure!

For example, I like to import the packages in the beginning:

Screenshot from 2024-08-11 19-59-43
Screenshot from 2024-08-11 19-59-431040×1091 52.7 KB

In the static HTML, hiding the code, it becomes:

Screenshot from 2024-08-11 20-00-09
Screenshot from 2024-08-11 20-00-091040×1091 44.3 KB

But you see that big space in the beginning?
It results from 5 cells with several tweaks that I want to hide in a presentation, without generating a big blank zone.

4

I think you are facing this issue with the ID selector:

Try to use the attribute selector as suggested in the link

5

You might also be interested in the extended ToC here
https://disberd.github.io/PlutoExtras.jl/stable/toc/#Extended-ToC
Which has some hiding cells functionality built in (disclaimer: that is my package)

1 Like
6

It did not work… :confused:

7

It might be that you need to increase specificity of the css rule.
You can try setting display: none !important; if that is the issue

8

I’ve tried this. It did not work. For some reason the selector is not working

9

Can you share the notebook?

10

I typically just move those cells to the end of the notebook in a situation like this…however, try this:

Suppose the id you want to target is 74c6aa7f-0df8-4530-8d9a-38fc4096fd01. You should be able to select it like this:

html"""
<style>
	#\37 4c6aa7f-0df8-4530-8d9a-38fc4096fd01 {
		display: none;
	}
</style>
"""

I don’t know why, but it only works for me if I leave that space between the first number in the id and the rest of the id.

11

It did not work. Here is the notebook
aula-02.jl (40.7 KB)

12

@rgouveiamendes You had a missing 0 in the first block for the cell ids (the one highlighted in the image below).
Adding the 0 to have a correct UUID and using the solution with the id attribute name works on my side (for some reason the #\30 ID synthax did not work for me)

image

2 Likes
13

:man_facepalming: Thanks! It’s working here too. I might have lost that zero when I switched from one syntax to the other.