Feature Suggestion for Userstyle CSS

Features
1

Right now, I have a few different userstyles that i rename to change features, and then restart joplin to reload the new stylesheet. A good example of this is I have one stylesheet for automatically numbered headings, and one without.

With this use case in mind, I have two feature ideas:

A feature to be able to reload stylesheet from Joplin settings without restarting would save me a lot of time.

And my second, more involved request is:

Add a settings toggle that controls active sections of CSS and reload the stylesheet using these altered sections. I’m not a web developer, but here what I’m envisioning:

Settings would have multiple userinputs of editable toggles.

  • [ ] (userinput)

For my use case described before, I could put in numbered-headings and check the toggle. The rendered markdown would change to be:

<body class="numbered-headings">

I could use this in my userstyle with:

body.numbered-headings {
    /* css to number headings */
}

Reloading style sheets from within the app is necessary to get this feature to work, and I think stylesheets aren’t really even officially supported, but this ability would make Joplin styling a killer feature.

2

Someone else in the forums noted that you can open the developer tools (in the help menu) and press F5 to reload the css. As for the rest, the Joplin styling is due for official support eventually maybe something like this will work it’s way in.

3

Hi @MRog40. What exactly is your use case? Do you want to change styles in time, let’s say a Sunday style on Sundays, a Monday style on Mondays, and a Fancy style when you just feel happy? Or do you want different kind of notes to have their own permanent style?

For changes in time, you could — as a setup — create a collection of userstyle-«xxx».css files, one for each style, and henceforth copy the one that’s most suitable at some period to userstyle.css, followed by the F5 trick as mentioned by @CalebJohn. I would recommend to write a script (or a set of scripts) for the copy action, in order to reduce the risk of overwriting the wrong CSS file at distracted moments.

Giving a specific note a different permanent style can be done in various ways. Two suggestions here.

1

By including a style block in the note (on top, at the bottom, it doesn’t matter where exactly) that imports the demanded CSS file, e.g.:

<style>html
  @import url(C:/Users/memophen/.config/joplin-desktop/userstyle-fancy.css);
  @import url(/Users/memophenon/.config/joplin-desktop/userstyle-fancy.css);
</style>

The first URL is valid on my pc, the second is valid on my iMac (I had chosen different user names on these platforms, so I need two lines now). Regrettably relative addresses like userstyle-fancy.css or ~/.config/joplin-desktop/userstyle-fancy.css don’t work. Be aware that the style definitions in userstyle.css are still operational as far as they are not explicitly overwritten by userstyle-fancy.css.

2

By classifying the entire content of the note:

<div class="fancy">

... Content of note goes here ...

</div>

This approach comprehends the specification of separate sets of all involved style elements, one set for each particular note-level class (sunday, monday, fancy, …), and all sets collected in that one and only userstyle.css, since included @imports are ignored by Joplin.

2 Likes
4

To build on @memophen 's suggestion.

If you use, say, three different styles (“numbered”, “fancy”, “all comic sans”), create three different notes each with different style / class setups in the note. Then use that Markdown to create three different templates and add them to your templates folder. So if you want a “fancy” note create your note using the “fancy” template.

Edited for brevity

2 Likes