# \[ANN\] PlutoStyles.jl: override styles of Pluto notebooks
**URL:** https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280
**Category:** Package Announcements
**Tags:** announcement, pluto
**Created:** [July 8, 2021, 3:03pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280 "2021-07-08T15:03:48Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 8, 2021, 3:03pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/1 "2021-07-08T15:03:48Z")
[Alexander Plavin / PlutoStyles.jl · GitLab](https://gitlab.com/aplavin/PlutoStyles.jl) - a small package adding the ability to override CSS styles of Pluto.jl notebooks. Or any other static Pluto asset, really.
As you may be aware of, Pluto.jl doesn’t support themes (yet?). I’ve been using in-browser user CSS to modify certain aspects of Pluto styling for a long time. However, it becomes less convenient and practical when switching between multiple computers, and user CSS are not even supported in some mobile browsers. This package allows overriding Pluto styles on the server side, independent of the browser.
I don’t intend to register PlutoStyles.jl in General, so feel free to add it by URL.
Default styles that fit my taste are provided, most notably (i) occupy full window width, and (ii) allow large image sizes in collections. Arbitrary custom overrides are possible, see README at
> **[Alexander Plavin / PlutoStyles.jl · GitLab](https://gitlab.com/aplavin/PlutoStyles.jl)**
>
> GitLab.com
---
### Author:  [@Mason](https://discourse.julialang.org/u/Mason)
#### Post date: [July 8, 2021, 5:29pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/2 "2021-07-08T17:29:27Z")
Nice! Do you have any examples you can show us?
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 10, 2021, 9:14am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/3 "2021-07-10T09:14:33Z")
Originally, I thought of the intended `PlutoStyles` audience as those who already know what CSS changes they want, and just need a convenient way to apply these modifications. Then the explanations given in README should be enough.
Maybe there are other potential users indeed, who have preferences similar to mine, and would like to use `PlutoStyles` defaults. In this case, see some comparison screenshots below!
`Pluto` original:
With `PlutoStyles` defaults:
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 10, 2021, 10:05am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/4 "2021-07-10T10:05:32Z")
Another piece of CSS is applied to the index Pluto page. It shows full paths for notebooks, and colors notebooks in the default `/pluto_notebooks/` directory:
I wanted to get rid of the underlining of the full path, but `text-decoration: none` doesn’t seem to work here for some reason.
---
### Author:  [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)
#### Post date: [July 12, 2021, 8:27am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/5 "2021-07-12T08:27:16Z")
How can I use it with the built-in package manager? I didn’t see instructions on how to add a package using a repo path here: [🎁 Package management · fonsp/Pluto.jl Wiki · GitHub](https://github.com/fonsp/Pluto.jl/wiki/%F0%9F%8E%81-Package-management)
---
### Author:  [@lungben](https://discourse.julialang.org/u/lungben)
#### Post date: [July 12, 2021, 9:50am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/6 "2021-07-12T09:50:56Z")
The built-in Pkg manager requires that the package is registered in a Registry.
This needs not to be the official General registry, a private Registry also works if you add it to Julia before starting Pluto (see [🎁 Package management · fonsp/Pluto.jl Wiki · GitHub](https://github.com/fonsp/Pluto.jl/wiki/%F0%9F%8E%81-Package-management#custom-registries)).
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 12, 2021, 10:53am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/7 "2021-07-12T10:53:54Z")
> [@StatisticalMouse](#):
>
> How can I use it with the built-in package manager?
I assume you are talking about **Pluto** built-in package manager? Because Julia built-in Pkg installs it just fine with `]add `.
`PlutoStyles` is not to be imported within notebooks! And shouldn’t be installed via Pluto.
This is the whole point: notebooks stay unmodified and without extra dependencies.
Just follow `README`: install `PlutoStyles`, and do
```julia
julia> using PlutoStyles
julia> Pluto.run()
```
instead of
```julia
julia> import Pluto
julia> Pluto.run()
```
to start the notebook server.
---
### Author:  [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)
#### Post date: [July 12, 2021, 11:26pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/8 "2021-07-12T23:26:13Z")
Ah… Your readme was not powerful enough to deflect my incorrect assumptions to the correct path.
---
### Author:  [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)
#### Post date: [July 16, 2021, 8:46am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/9 "2021-07-16T08:46:01Z")
A big reason I made the mistake is that I usually start Pluto with this alias, so the phase where the change should be done is usually hidden.
```julia
alias pluto='julia --project=@. -e "using Pluto
if length(ARGS) > 0
notebook = ARGS[1]
Pluto.run(notebook=joinpath(pwd(), notebook))
else
Pluto.run()
end"'
```
I created a version of this that works with PlutoStyles.
```julia
alias plutostyles='julia --project=@. -e "using PlutoStyles
if length(ARGS) > 0
notebook = ARGS[1]
Pluto.run(notebook=joinpath(pwd(), notebook))
else
Pluto.run()
end"'
```
With the Pluto’s built-in package manager, the `--project=@.` is probably no longer needed.
---
### Author:  [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)
#### Post date: [July 16, 2021, 9:41am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/10 "2021-07-16T09:41:46Z")
I like the wideness of PlutoStyles. No longer does so much of the space get wasted. It’s maybe a bit too wide as some of Pluto’s elements get underneath the scroll bar on a mac, sometimes.
IMHO, the three buttons that open from ‘…’ would be better inside the box, in place of the ‘…’.
This would save one mouse click, and would also solve this problem.
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 16, 2021, 10:05am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/11 "2021-07-16T10:05:00Z")
Nice idea for this CLI wrapper! Going to borrow it (:
I typically use Pluto in two different ways: a permanently-running instance on a remote server, and also start a local instance from time to time. Your wrapper conveniently covers both cases.
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 16, 2021, 10:07am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/12 "2021-07-16T10:07:06Z")
Yes, the popup menu is indeed beyond the screen edge on all systems. I tried to make it popup to the left of the “…” button, but didn’t succeed in it - maybe someone with a better CSS knowledge helps. Or it gets changed in Pluto itself as you say…
> [@StatisticalMouse](#):
>
> I like the wideness of PlutoStyles. No longer does so much of the space get wasted.
That’s the first and most important modification I made! See [Occupy full window width · Issue #400 · fonsp/Pluto.jl · GitHub](https://github.com/fonsp/Pluto.jl/issues/400).
---
### Author:  [@disberd](https://discourse.julialang.org/u/disberd)
#### Post date: [July 16, 2021, 11:07am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/13 "2021-07-16T11:07:10Z")
You can use the same CSS that is being used in Pluto if the screen width is too small, which you can find here:
>
Here is that in action in a pluto notebook where I put the CSS from PlutoStyles in the first cell and the snippet from `editor.css` (without @media as you want it active all the time) in the second cell
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 16, 2021, 1:43pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/14 "2021-07-16T13:43:46Z")
Thanks!
Do you also happen to know how to fix this?
Playing with `z-index` didn’t help, those run buttons still appear in front of the popup.
---
### Author:  [@disberd](https://discourse.julialang.org/u/disberd)
#### Post date: [July 16, 2021, 2:22pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/15 "2021-07-16T14:22:50Z")
That is weird…
I tried adding the same snippet with the z-index as in the editor.css and I get the z-index stacking correctly:
Does it still keep being like that if you put the same css I had in the cell and maybe refresh the browser page?
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 16, 2021, 2:33pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/16 "2021-07-16T14:33:07Z")
Interesting, you don’t seem to have these cell footers at all for inactive cells! I see them all the time, in plain vanilla Pluto, on all browsers and devices.
---
### Author:  [@disberd](https://discourse.julialang.org/u/disberd)
#### Post date: [July 16, 2021, 2:48pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/17 "2021-07-16T14:48:48Z")
That is weird, looking at the editor.css it should only appear if your cell has non-saved code or if your mouse is focussing the cell
---
### Author:  [@lungben](https://discourse.julialang.org/u/lungben)
#### Post date: [July 16, 2021, 7:11pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/18 "2021-07-16T19:11:09Z")
Cell deactivation does not remove footers (or cell timings in them), at least not in default Pluto.
---
### Author:  [@disberd](https://discourse.julialang.org/u/disberd)
#### Post date: [July 17, 2021, 6:31am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/19 "2021-07-17T06:31:24Z")
I think @aplavin meant unfocused or something along that line with “inactive”.
Are you instead referring to the disable feature you did introduce recently?
If you look at the latest screenshot from him none of the cells seem disabled but is abyway strange that all cella show the footer even if they are not focused or containing unsaved code
---
### Author:  [@aplavin](https://discourse.julialang.org/u/aplavin)
#### Post date: [July 17, 2021, 6:34am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/20 "2021-07-17T06:34:03Z")
Looks like I played with `z-index` wrong on my first try (: Now it works!
A new `PlutoStyles` version is available, with the popup menu to the left.
As for cell timings, I actually like that they are always visible. But tried digging in with the browser devtools to understand why anyway. These style lines are shown as active for me:
[https://github.com/fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1286-L1287](https://github.com/fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1286-L1287)
My guess is the `any-pointer: coarse` condition at
[https://github.com/fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1263-L1263](https://github.com/fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1263-L1263)
is satisfied because all my devices (laptop and tablet) have a touchscreen.
[Next page](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280.md?page=2)