# \[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:** 19\
**Page:** 2

<div class="post-metadata">

**Author:** ![StatisticalMouse](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/statisticalmouse/32/43370_2.png) [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)\
**Post date:** [July 17, 2021, 8:33am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/21 "2021-07-17T08:33:27Z")

</div>

I changed my `plutostyles` alias so that I can run it alongside the normal version.

```julia
alias plutostyles='julia --project=@. -e "using PlutoStyles
if length(ARGS) > 0
    notebook = ARGS[1]
    Pluto.run(notebook=joinpath(pwd(), notebook); port=1235)
else
    Pluto.run(; port=1235)
end"'

```

---

<div class="post-metadata">

**Author:** ![StatisticalMouse](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/statisticalmouse/32/43370_2.png) [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)\
**Post date:** [July 17, 2021, 8:35am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/22 "2021-07-17T08:35:08Z")

</div>

> [@aplavin](#):
>
> 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.

I don’t see a new version. Are you sure you did `git push`? 🙂

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [July 17, 2021, 9:27am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/23 "2021-07-17T09:27:33Z")

</div>

> [@StatisticalMouse](#):
>
> I don’t see a new version. Are you sure you did `git push` ? 🙂

Sure! These lines contain the new styles:

> <https://gitlab.com/aplavin/PlutoStyles.jl/-/blob/master/src/PlutoStyles.jl#L48-54>

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [July 17, 2021, 10:37am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/24 "2021-07-17T10:37:54Z")

</div>

For some weird reason it looks like the commit where you added this things on gitlab appear as “authored 6 months ago”, exactly at midnight GMT of the beginning of the year:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/6/4/649a5a34446b3bd5551e45c87849b4c40a94d15a.png)

---

<div class="post-metadata">

**Author:** ![StatisticalMouse](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/statisticalmouse/32/43370_2.png) [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)\
**Post date:** [July 17, 2021, 11:10am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/25 "2021-07-17T11:10:02Z")

</div>

Yeah…

 ![Files · master · Alexander Plavin PlutoStyles.jl · GitLab](https://global.discourse-cdn.com/julialang/original/3X/a/1/a1ea26b314901fbd265606802aa9818726b6780a.png)

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [July 17, 2021, 1:10pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/26 "2021-07-17T13:10:09Z")

</div>

Yes, that’s intended.  
I’m not comfortable sharing exact details (date & time) of all my open-source commits with every person in the world, see [Publish packages without complete commit history](https://discourse.julialang.org/t/publish-packages-without-complete-commit-history/45407) for some discussion. So I do all development in private github repos, and have a script (using [GitFiterRepo.jl](https://juliahub.com/ui/Packages/GitFilterRepo/6Fs83)) that transfers the repo to gitlab, rounding all dates to the year.  
That makes it still possible to see the commits history - without exact dates, but year is enough to tell whether the project is abandoned long ago or not.

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [July 17, 2021, 2:20pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/27 "2021-07-17T14:20:54Z")

</div>

Ah I see, interesting to know this is possible!

---

<div class="post-metadata">

**Author:** ![StatisticalMouse](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/statisticalmouse/32/43370_2.png) [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)\
**Post date:** [July 17, 2021, 7:07pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/28 "2021-07-17T19:07:41Z")

</div>

You know best how you want to work, but to me a repo where last commits are six months ago looks somewhat abandoned. It’s also pretty hard to know it has been updated since last I looked, especially since you don’t want this to be a package that I could just `] up` .

---

<div class="post-metadata">

**Author:** ![liuyxpp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/liuyxpp/32/9870_2.png) [@liuyxpp](https://discourse.julialang.org/u/liuyxpp)\
**Post date:** [July 18, 2021, 4:54am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/29 "2021-07-18T04:54:10Z")

</div>

I request this feature by filing an issue. However, the author directs me to use Pluto inside feedback instead. I then make a request through Pluto inside feedback. But nothing seems to change yet. Perhaps the Pluto author don’t like this kind of suggestion. I really hate the … button!

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [July 18, 2021, 6:34am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/30 "2021-07-18T06:34:07Z")

</div>

> [@StatisticalMouse](#):
>
> to me a repo where last commits are six months ago looks somewhat abandoned

To each his own (definition of abandoned). I hope for this package to become obsolete at some point anyway, when themes get added to pluto itself.

> [@StatisticalMouse](#):
>
> especially since you don’t want this to be a package that I could just `] up` .

Can’t you really use `]up` here? I though `Pkg` does update packages added by url as well.

> [@liuyxpp](#):
>
> But nothing seems to change yet. Perhaps the Pluto author don’t like this kind of suggestion.

Such visual changes should be possible by modifying static assets - css or js files.

I also don’t support some opinionated choices made in Pluto. But these choices and the ability to easily make them are likely major reasons of why Pluto manages to provide a fresh but consistent take on notebooks.

---

<div class="post-metadata">

**Author:** ![lmiq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lmiq/32/18314_2.png) [@lmiq](https://discourse.julialang.org/u/lmiq)\
**Post date:** [July 23, 2021, 1:23am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/31 "2021-07-23T01:23:22Z")

</div>

Is it possible to put the output of the cell below the code using styles? And could we add, by default, a content menu?

More broadly, can the package accept new style contributions, as if they were themes, so one could just choose a theme?

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [July 23, 2021, 5:29am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/32 "2021-07-23T05:29:38Z")

</div>

> [@lmiq](#):
>
> Is it possible to put the output of the cell below the code using styles? And could we add, by default, a content menu?

Maybe, I didn’t need it myself and haven’t tried. Everyone is welcome to play with CSS and share their results.  
Btw, what is “content menu” here?

> [@lmiq](#):
>
> More broadly, can the package accept new style contributions, as if they were themes, so one could just choose a theme?

Well, first I intended `PlutoStyles` to serve as a basis or inspiration for others, so that people create themes for themselves by modifying this package or building on top of it. But if there is indeed a demand for several styling options, I’m open to such contributions into `PlutoStyles` itself.

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [July 23, 2021, 6:36am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/33 "2021-07-23T06:36:51Z")

</div>

Just tried for fun to swap output and inputs of cells.

It is quite hacky and the run-area part where the play button and the execution time of the cell get always at the bottom of the output cell, but it seems doable:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/9/8/985e9ef161078bab35a883f725d5dfa629e101f6.png)

Don’t know if other things break by doing this though

---

<div class="post-metadata">

**Author:** ![StatisticalMouse](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/statisticalmouse/32/43370_2.png) [@StatisticalMouse](https://discourse.julialang.org/u/StatisticalMouse)\
**Post date:** [July 23, 2021, 7:41am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/34 "2021-07-23T07:41:55Z")

</div>

> [@aplavin](#):
>
> Maybe, I didn’t need it myself and haven’t tried. Everyone is welcome to play with CSS and share their results.

There’s a problem, and it’s that you haven’t defined a license. Currently you’ve reserved all rights.

---

<div class="post-metadata">

**Author:** ![lmiq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lmiq/32/18314_2.png) [@lmiq](https://discourse.julialang.org/u/lmiq)\
**Post date:** [July 23, 2021, 10:23am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/35 "2021-07-23T10:23:03Z")

</div>

> [@aplavin](#):
>
> Btw, what is “content menu” here?

> <https://github.com/JuliaPluto/PlutoUI.jl/pull/30#issuecomment-692938913>
>
> Thank you for the inputs @marius311 
> 
> ✔ Improved UX
> ~ Instant updates - work… in progress
> 
> !\[image\](https://user-images.githubusercontent.com/498813/93256783-82947800-f7b9-11ea-8641-800b50eb4bc3.png)

This one.

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [July 24, 2021, 11:28am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/36 "2021-07-24T11:28:09Z")

</div>

I see! Table of contents definitely isn’t going to be included in the styles `PlutoStyles.jl` applies by default, I never use/want ToC in my Pluto notebooks. As I said, alternative themes are clearly possible, with at least two different approaches.  
#1: you or someone else fork my repo and add/change styles there. Others can do `]add <your_url>/PlutoStyles.jl` instead of `]add https://gitlab.com/aplavin/PlutoStyles.jl` then.  
#2: potentially, theme selection can be added to a single `PlutoStyles` package.  
I don’t see any advantages for #2 vs #1 though, so would prefer the first solution due to its simplicity.

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [July 24, 2021, 11:29am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/37 "2021-07-24T11:29:10Z")

</div>

> [@StatisticalMouse](#):
>
> There’s a problem, and it’s that you haven’t defined a license.

Thanks for pointing out! If only all problems could be resolved as easily (:  
Added a `LICENSE` file.

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [January 22, 2022, 9:00am UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/38 "2022-01-22T09:00:09Z")

</div>

In the just-released Pluto 0.17.6 ([[ANN] Pluto 0.17.6](https://discourse.julialang.org/t/ann-pluto-0-17-6/75011)), css file paths and selectors have slightly changed. I’ve updated PlutoStyles (0.1.15) so that it continues working, which required very minor modifications. All the default style adjustments remain effectively the same.

> **[Alexander Plavin / PlutoStyles.jl · GitLab](https://gitlab.com/aplavin/PlutoStyles.jl)**
>
> GitLab.com

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [September 12, 2022, 3:46pm UTC](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280/39 "2022-09-12T15:46:53Z")

</div>

I finally decided to register `PlutoStyles` in `General` for more convenient installation. No more installing from the URL!

From time to time, PlutoStyles does require slight updates to match changes made in Pluto, but styles have stayed basically the same as when I originally announced this package.

[Previous page](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280.md?page=1)