# Feature Suggestion for Userstyle CSS

**URL:** <https://discourse.joplinapp.org/t/feature-suggestion-for-userstyle-css/7293>\
**Category:** Features\
**Created:** [23 March 2020 19:10 UTC](https://discourse.joplinapp.org/t/feature-suggestion-for-userstyle-css/7293 "2020-03-23T19:10:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MRog40](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@MRog40](https://discourse.joplinapp.org/u/MRog40)\
**Post date:** [23 March 2020 19:10 UTC](https://discourse.joplinapp.org/t/feature-suggestion-for-userstyle-css/7293/1 "2020-03-23T19:10:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [23 March 2020 23:37 UTC](https://discourse.joplinapp.org/t/feature-suggestion-for-userstyle-css/7293/2 "2020-03-23T23:37:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![memophen](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/memophen/32/1937_2.png) [@memophen](https://discourse.joplinapp.org/u/memophen)\
**Post date:** [24 March 2020 13:25 UTC](https://discourse.joplinapp.org/t/feature-suggestion-for-userstyle-css/7293/3 "2020-03-24T13:25:54Z")

</div>

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.:

```auto
<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:

```auto
<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 `@import`s are ignored by Joplin.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [24 March 2020 13:59 UTC](https://discourse.joplinapp.org/t/feature-suggestion-for-userstyle-css/7293/4 "2020-03-24T13:59:54Z")

</div>

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_