Share your CSS

[t0dd]

@foto16

Can you share why Joplin fits your use better than Obsidian?

Kind of off topic, but Obsidian always seemed underpowered to me. I used both side by side for a year or so, but that was … some time ago.

My attraction to Joplin:

• Open source. This is a huge deal to me.
• End to end encrypted. I think obsidian does this now, though. But … not open source, so … the security is … who knows.
• Obsidian would struggle with large notes on the past. Joplin does not.
• To keep this response on point for this thread: Joplin is incredibly customizable with the full power of CSS at it's disposal. Obsidian's support for CSS is not just bad, it's awful. I heavily leverage this feature. Obsidian faceplants here and made it a no go for me.
• Joplin Cloud is awesome. I pay for it and it is worth every dime. I share stuff with people all of the time. I have not tried the notebook sharing feature, but that is really powerful.
• Where Obsidian shines: it's interface panel control is less awkward. It's knowledge graph stuff is easier to maintain, but … is not that complex to maintain in Joplin either. Obsidian’s canvas feature is cool. Other than that, Joplin is superior, IMHO. I can't really think where else Obsidian shines.
• Can obsidian use literally any external editor? Maybe. I don't know. But Joplin can.
• Oh. Here's a Joplin gripe: to spin up Joplin on another device is more complicated and errorprone than it should be. There. That's annoying.
• Back on topic: powerful CSS support. And Latex, and mermaid, and all those things. Joplin just wins in this regard and that's important to me.
• Laurent seems to be a nice guy. That's important too.

[dbareis]

Thanks but the solution is way too hard

[Waldorf3]

This is really nice, thanks for sharing!
Anyone know how to do the same for the code box editor, it is

HUUUGE!

[JLMirallesB]

CEFIRE CSS v2.0 — Custom stylesheet for instructional materials (with a sprinkle of HTML)

Hi everyone!
I want to share a CSS stylesheet I’ve been developing for Joplin, aimed at creating visually structured training/instructional materials.

A quick note on my workflow

Joplin is my go-to for markdown notes — clean, fast, portable. But I also use it for something it wasn’t strictly designed for: building full training materials for teacher education courses. In those cases, I give myself a small license: I mix in a little HTML — nothing too intrusive, just enough to unlock what pure markdown can’t do — and let CSS do the heavy lifting. Thanks to the Import Local CSS plugin, I can apply this stylesheet selectively, only to the notes where I actually want it. The result is what I’m sharing here.
What’s included

The stylesheet (cefire_custom.css) provides a cohesive visual system built around an accessible color palette (WCAG AA). The key elements:
∙ Alert/info boxes in 8 color variants (b-blue, b-red, b-cefire…), with optional styled headers
∙ Collapsible boxes using — same visual style, great for optional content or expandable sections
∙ Progress bars — for showing completion or percentages
∙ Stat boxes — highlight key figures at a glance
∙ Inline badges — label content as mandatory, in progress, completed, etc.
∙ Auto-numbered steps — sequential steps without manual counting
∙ Section dividers with labels, level indicators, and blockquotes with author
∙ Styled definition lists (works with the markdown-it-deflist plugin)
∙ Auto-numbered TOC synced with heading numbering
(I’ll attach screenshots so you can see it in action)

The palette is customizable

The default colors follow the corporate identity of CEFIRE (the teacher training network in the Valencian Community, Spain), but everything is driven by CSS variables at the top of the file. Adapting it to your own branding is just a few variable changes.

Repo & quick reference
GitHub - JLMirallesB/CEFIRE_CSS: CEFIRE CSS style for Joplin

The repo includes the full stylesheet, a quick reference card, and a demo note so you can preview all elements before committing. If you use it, adapt it, or find any bugs — issues and PRs are very welcome!​​​​​​​​​​​​​​​​

[laurent]

That's very interesting, thanks for sharing! Do you have any example of training material that you've created with this theme?

[willysjeepman]

Looks great!

I notice that markdown in a collapsible box doesn’t get processed… it remains in raw markdown. (Mac OS; Joplin 3.5.13)

[Fourier]

This is some CSS that toggles either a white background or colour inversion of an image.

This was the result of not being able to read SVG images on a dark theme.

Joplin-wide stylesheet (to apply to markdown editor):

/* Invert SVG images */
img[src*=".svg" i] {
    filter: invert(100%);
}
/* add white background to deal with transparent images */
img:not([src*=".svg" i]) { 
    background-color: white;
}
/* reset image formatting with empty h3 markdown (###) */
.cm-h3:has(> :last-child:nth-child(1), > :last-child:nth-child(3)) + .cm-line + .cm-md-image > img.image {
    background-color: transparent;
    filter: invert(0%);
}
/* Give image white background with empty h4 markdown (####) */
.cm-h4:has(> :last-child:nth-child(1), > :last-child:nth-child(3)) + .cm-line + .cm-md-image > img.image {
    background-color: white;
    filter: invert(0%);
}
/* Invert image with empty h5 markdown (#####) */
.cm-h5:has(> :last-child:nth-child(1), > :last-child:nth-child(3)) + .cm-line + .cm-md-image > img.image {
    background-color: transparent;
    filter: invert(100%);
}
/* Make h3, h4 and h5 x-small when empty (xx-small when not in focus) */
:is(.cm-h3, .cm-h4, .cm-h5):has(> :last-child:nth-child(1)) { 
    font-size: x-small;
}
:is(.cm-h3, .cm-h4, .cm-h5):has(> :last-child:nth-child(3)) { 
    font-size: xx-small;
}

Markdown stylesheet (to apply to viewer):

/* Invert SVG images */
img[src*=".svg" i] { 
    filter: invert(100%);
}
/* add white background to deal with transparent images */
img:not([src*=".svg" i]) { 
    background-color: white;
}
/* reset image formatting with empty h3 markdown (###) */
h3.maps-to-line[id=""] + p.maps-to-line > img {
    background-color: transparent;
    filter: invert(0%);
}
/* Give image white background with empty h4 markdown (####) */
h4.maps-to-line[id=""] + p.maps-to-line > img {
    background-color: white;
    filter: invert(0%);
}
    /* Invert image with empty h5 markdown (#####) */
h5.maps-to-line[id=""] + p.maps-to-line > img {
    background-color: transparent;
    filter: invert(100%);
}

• This by default inverts all SVG images. For me, this would apply to all written notes imported from OneNote. Any non-SVG image will get a white background.
  
  
• To undo this formatting, add an empty h3 header (###) immediately above the resource link.
  
  
  
  (unreadable by default)
• To make the image background white, add an empty h4 header (####) instead.
  
  
• To invert the colour of an image, add an empty h5 (#####) instead.
  (see default).

The CSS will also make these empty headers quite small, so the whitespace is less obnoxious.

Note that this requires notes being in markdown. So if you do have handwritten notes that you imported from OneNote more than a few months ago, these are probably in HTML and reference hundreds of files and are not conducive to markdown conversion.
If that is the case, it would be worth re-importing these notes as a recent update added a fix that merges consecutive SVG files. Even if not to convert to markdown, but to massively reduce resource files and reduce initial sync burden.

Desktop: Importing from OneNote: Improve handwriting import (#14305)