Custom stylesheets

Your hierarchy could be extended to mobile/desktop -> OS -> device -> screen. On further consideration, screen is a dimension of its own. So there are at least four dimensions to deal with:

  1. The cascade of stylesheets, i.e. the sequence in which style specs are processed
  2. Devices (synchronization of specs for individual devices is not needed, but for higher levels in the hierarchy it might be a nice to have)
  3. Screens (synchonization between devices might be desirable, but is not essential)
  4. Notes (are already synchonized)

I do hope that the configuration interface won’t reflect this complexity in the future. In fact, the current desktop version meets my needs to a great extent, since I can do a lot of manipulations outside Joplin. What I’m really still missing is the possibility to use references in <link> tags and hyperlinks like:

  • ./«file»
  • ~/.config/joplin-desktop/«file»
  • $HOME/.config/joplin-desktop/«file»

That would facilitate generic constructions in my notes. More has to be built for mobile devices: at least provisions for creating, editing, renaming, and deleting (and maybe copying) CSS files in some dedicated config folder. Support for hyperlinks to HTML files on the synchonization target might be another challenge. I have no ideas about that yet.

Just another wild idea: how about making userstyle.css a parametrized stylesheet? It would be possible then to make your self defined color schemes dependent on the chosen theme.

Thanks, nice discussion. So 3 other points to consider :

  1. Have a CSS editor for easy styling of the css file
  2. Give some templates (themes) that user could choose without any css coding
  3. These two features should support desktop AND mobile (styles could be different on mobile, have to use responsive design in the css - the editor could make it more easy to build)

(Just some petty facts from my side. This post was intended as an answer here to @DominicDesbiens, or in fact to anyone who is interested in where to find the built-in style definitions.)

If you know how to interpret the CSS language and know how to open a file in a safe way for reading (i.e. without the risk that you unintentionally change something), you could peek in the following file to see what’s predefined by Joplin, before deciding what to (re)define by yourself in other places:

  • on Windows: section noteStyle.js of Joplin/resources/app.asar in the folder where Joplin is installed
  • on macOS:

I expect this also gives a clue where to find it on Linux. Maybe there is a way to unpack an ASAR file. That would allow for a more user-friendly view experience. Anyway, it’s a good start for adjustments of the styling in userstyle.css, since the CSS cascade is:

  1. the built-in script noteStyle.js (parametrized, so it adapts to the chosen theme)
  2. ~/.config/joplin-desktop/userstyle.css
  3. links to other CSS files in your notes
  4. hard coded <style> blocks in your notes
  5. hard coded styles= attributes in HTML tags in your notes

Joplin interprets this cascade from 1 to 5, and the last specifications prevail. In the current Joplin architecture, the notes are synchronized, the JavaScript code and CSS files themselves not.


Thanks @memophen. I don't think my knowledge is advanced enough. Don't know where to find the CSS tags :slight_smile:

Ohhh ! New in the latest version of Joplin (1.0.178). In Appearance section in Options, there is two buttons to open userstyle.css and userchrome.css !

Just impressed about development of this app ! Thanks…

For custom style sheet, here is little trick to know all tags styled in Joplin : export notes in HTML and see the source code of the HTML file. Doing this in empty Joplin cause it export all notes without encryption.

1 Like

I quote in Checkbox within table cell - #6 by memophen

as some great progress has been published today

Hi everybody,

please excuse my simplified English, I hope I don’t misuse the language too much.

For the formatting of html documents, I have created a special notebook and a template, without content.
Having followed with interest the “Custom stylesheet” discussion, I would like to apply a custom stylesheet to a notebook and to this template.
I tried various methods, without finding the right one.

First, write all styles in the template
Result: CSS rules are inserted in the note

Insert a link to the particular stylesheet, as

src= "~/.config/joplin-desktop/special.css"
<link rel="stylesheet" type="text/css" href="~/.config/joplin-desktop/special.css">
<link rel="stylesheet" type="text/css" href="/Users/myprofile/.config/joplin-desktop/special.css">

None of them work, I would like how to learn from my mistakes

Note: I have a generic style sheet “userstyle.css” that applies to my other notes. Would it override the specific style sheet?

Hi @betternote unfortunately what you’re trying to do isn’t currently supported in Joplin. If you want a note to have custom CSS you will need to copy and paste the contents of special.css in between style tags for each note.

Thx @CalebJohn.
Now, I know there’s no point in continuing to exhaust myself on this subject.
Applying the model containing special.css remains the simplest solution.

Hi @betternote,

What you try to achieve is perfectly achievable, see here. Supposing that your address is OK, there are two ways to do it:

  @import "/Users/myprofile/.config/joplin-desktop/special.css"


<link rel="stylesheet" type="text/css" href="/Users/myprofile/.config/joplin-desktop/special.css" />

Your <style> block had an invalid syntax, and neither the tilde nor environment variables nor relative (to what?) paths will do the job. The full path must be hard coded.

The imported style sheet will overrule /Users/myprofile/.config/joplin-desktop/userstyle.css, because the last specification always wins.

What I’ve said there about the cascade is not quite correct. The processing sequence is:

  1. the built-in script noteStyle.js (parametrized, so it adapts to the chosen theme)
  2. ~/.config/joplin-desktop/userstyle.css
  3. hard coded <style> blocks and links to other CSS files in your notes, in the order of their presence (their position relative to the real content of the note has no influence)
  4. hard coded styles= attributes in HTML tags in your notes
1 Like

thanks a lot @memophen!
The syntax with @import and hard coded full path works perfectly.


You can also use Help > Toggle development tools from the Joplin menu and:

Click on the element inspector - Marked (1) in the below picture (click to expand)
Point it at the item of interest in the rendered note - (2)
See its full element name in the pop-up - (3)
Look at it in detail in the main tool window - (4)


Oh nice ! With your trick I have been able to find too the good elements name to style the app part that is customized by userchrome.css. Many thanks !

@DominicDesbiens there’s a thread for sharing custom css please consider adding your css to it! I know there are a bunch of us who like to see/borrow/share from others that use Joplin.

Thanks. My css is very personal to my needs, i have to complete it before to share the code.

Just came across this. I’m applying for GSoC under Joplin, and my idea is to implement a framework to sync settings in Joplin. If it works out well, I think it would be helpful to customise styling as a setting and be able to sync it. This would solve the issue of

  1. Losing the styling if it’s stored as a setting
  2. Having the styling notes mess with the UX if it’s stored as a note in a notebook

As I’ve planned it, it would handle the discrepancies in valid settings across platforms, so that aspect of styling should be handled. I’m happy to get feedback on this!

P.S. I’d be willing to work on this even if I’m not selected, if the community thinks its a useful feature!

Hi @anihm136,

I appreciate your enthusiasm. Just some remarks here as an appetizer. :slight_smile:

It's more than a technical challenge, I think. I would like to see some settings synchronized, but not all. For instance, mobile and desktop often demands for different styling. And within the desktop range: the resolution of the screen can certainly make a difference. At this moment I'm forcing myself to keep the settings the same on all my desktops, but once fallen prey to aestheticism, I might decide otherwise. And I don't mind to synchronize the CSS files manually, as I can still oversee my machinery up to now.

So the desirable outcome could be some mixture of global and local components that refer to each other. I haven't done yet any thinking about a configuration for that.

Neither the technical aspect is trivial. How to harmonize desktop and mobile? Especially iOS could be a hard nut, because of Apple's policy.

1 Like

I understand that it will be a hard task (otherwise it would probably be implemented by now!). The way I’m thinking of doing it, we should be able to separate the platform-independent and platform-dependent settings, and when retrieving from sync target on a different platform, only retrieve the platform-independent parts. That way -

  1. If you use 2 phones, all settings should be replicated accurately
  2. If you use one client on laptop and one on mobile, you should get the basic settings synced (date and time format, language, sync settings etc), and the platform-specific settings (like style settings, font size, theme etc) will be left for the user to customise (and be available to sync for other devices of the same type)
  3. If you want to have 2 devices of the same type with different configurations, add option to disable setting sync for that device

I think between these options, it should handle most common customization cases. Of course, it still needs a lot of community feedback to handle specific cases, and inevitably some unexpected issues will crop up while implementing, but it should be a good feature to implement overall.

1 Like

Hi all,
I come back to this subject to tell of a misadventure.
Note: I use Joplin to prepare a newsletter via email, then I copy/paste the formatted page in my message.

Here is the problem
1- if the external style sheet is imported, I lose the formatting
2- if the styles are included in the Joplin note, the formatting is kept

To troubleshoot, I exported the note in html, then I copied the content of the web page.
Is there a better way to get around this or should I continue to include my styles in the note?

Edit: I’ve found a possible roundabout, importing my stylesheet by this syntax
@import url("absolute path to stylesheet.css") than by the simple string syntax.
Thanks to w3school!

Could you confirm if I’m right or not?

Hi @betternote,

This is more complicated than I had expected. In the first place: copy/paste from the Joplin viewer works for me, at least in Outlook on Windows. Exporting to HTML and copy/paste from Firefox drops the styling, but the same trick with Chrome as intermediary is okay again.

Even when it is a success, it’s not a complete success. Ik lose some of the stylings by false tags, but not in all cases. I don’t see the pattern yet.

As for keeping the styles available to my exported HTML, I use this model:

  • Let’s presume I want to export my note “The Nature of Reality” to ~/thoughts/content/The Nature of Reality.html (I put all my deep thoughts in that folder).
  • I’ve made this copy of my personal stylesheet: ~/thoughts/style/userstyle.css.
  • I put a relative reference to that stylesheet in my note (this has no effect in Joplin, since it cannot interpret such references well). It can be done in several ways:
  @import "../style/userstyle.css";


<link rel="stylesheet" href="../style/userstyle.css"/> 

Both Firefox and Chrome render the exported note as wished for. But as said, some stylings may get lost in the copying from Joplin or Chrome to a message.

1 Like