Is there a way to use custom stylesheets with Joplin, so you can pick fonts and other properties for different elements such as tables and headers?

The global resize started to work for me after the last update but didn’t come back to the thread until now. The issue with the text and icons not fitting is because the line-height isn’t responsive so while the text increases the line-height doesn’t change making it very cramped.

Custom stylesheet on Android is not supported and if I understand it correctly by a previous comment in another thread, it is not possible currently.

I’ve created a small draft PR playing around with this concept: https://github.com/laurent22/joplin/pull/2099 @laurent I’d be curious to get your perspective before I go further with it. Apologies, I forgot to mention in this thread before I started, so this whole addition may not be welcome. No worries if not, I should’ve remembered to check in with you first.

@laurent, As far as I see now, the adaptable userstyle.css has been implemented for Windows and macOS. I don’t know about Linux and Android, but the iOS version does not support it (or it must be well hidden). Are there any serious plans for doing so? It’s one of the things I miss most as a fresh Joplin user, because the current style settings are too space consuming on the tiny screen of my iPhone.

I’d love to be able to set custom styles across notes in iOS, too! As far as my implementation of custom stylesheets goes, there’s unfortunately no way to set a default stylesheet for iOS because there’s no way to access an equivalent of the ~/.config/joplin-desktop/ directory. In the short term, I’ve been adding this to the bottom of my notes to get the styles I want. Not the most elegant solution, but it makes the rendering look much nicer at least: body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-bottom: 2em !important; } code, pre { font-family: "iA Writer Mono V", "Fira Code"; // font-weight: 600; // font-size: .95em; line-height: 1.5em; background: rgba(0, 76, 114, .08) !important; border-radius: 4px; } .code, .inline-code { border: none; background: rgba(0, 76, 114, .08); border-radius: 4px; } img[title="250px"] { width: 250px; } img[title="350px"] { width: 350px; } mark { background: #3edbff53 !important; padding: 1px 3px; } .md-checkbox .checkbox-label-checked { cursor: pointer; } /********************************* **** Links to internal notes **** *********************************/ a .resource-icon { display: none; } a[href="#"] { color: green; } Longer-term, we could consider supporting a Meta Joplin notebook or something, where you can create a note called userstyle.css (just like the one in ~/.config/joplin-desktop/) that applies the styles there. Or, we could consider adding it under the Configuration panel as a big string, similar to how we store the themes. I think either of these would be a more intuitive solution for the desktop app too, rather than having to dig into the fairly hard-to-find ~/.config/joplin-desktop/ directory.

[image] devonzuegel: Longer-term, we could consider supporting a Meta Joplin notebook or something, We had a good discussion going, but it died down....

An alternative for inline style definitions could be this: The first one for my pc, the second for my Mac. I would prefer a relative stylesheet address, but I couldn’t find a way to get that working. Nor do I have any clue what kind of address I should use on iOS. It was a good decision to make the userstyle.css device-dependent, in my opinion. Different devices demand for different stylings. But a cascade allows you to play with style scopes: on your device — built-in AppStyleSheet (dynamic) on your device — UserStyleSheet in notes — CSS files linked by tag in notes — CSS block embedded as element, optionally containing @import functions in notes — style attributes added to HTML tag Thanks for sharing your stylesheet BTW. I hadn’t realized I could suppress the J icon at internal links this way. It’s too big, too low positioned, and ruins the regular line spacing.

I would like to get this discussion going again, so in that spirit here is my proposal. I would propose 3 different modes for setting css. No CSS Select from filesystem (this will use the system default file picker). The selected file can be displayed underneath the setting along with a reload button. The file will be reloaded on application start (same as now) Load from note. This will add an option to the note context menu “Set Userstyle” and “Set Userchrome” (can also have an input in settings similar to the goto anything feature). This will allow users to take advantage of syncing notes across platforms. Having these options means users can manage css as they want without having to create any specific folders or directories. To make option 3 a bit smoother we should add in the ability for users to hide notebooks, this will allow users to create a config notebook which holds all the styling notes without those notes always being visible.

I think option 3 is the easiest one. Technically it would take very little to get this working, but it’s in terms of UX that it’s not great. It’s a bit messy, even with hidden notebooks, because it’s mixed with the other notes. There’s also the problem of requiring the user to create notes with magic names so that they are picked up by the app. And what if there’s a syntax error in the config file? We also don’t have a good way to report that. They’ll also show up in search results, which might be unexpected. Maybe it would make sense to create a separate class of sync items for this. They’ll be used only for config, and we could list them in a separate config screen and manage them differently than the notes.

You could use a reserved tag name, like .system or something, to identify and group config notes.

Custom stylesheets

Support

tessus 3 January 2020 22:10 15

We had a good discussion going, but it died down....

Topic		Replies	Views
Why is custom CSS an important feature for you? Lounge	22	3410	14 June 2021
Collection of custom CSS Features tips-and-tricks	16	23015	11 October 2020
Allow to use userstyle.css on android Features	1	95	25 August 2026
Feature request : cross-platform sync for userstyle.css file Features	4	2349	10 January 2020
Introduction to customising Joplin (userchrome.css & userstyle.css) Lounge tips-and-tricks , how-to	0	24986	30 October 2021

Custom stylesheets

Related topics