Relative paths in CSS file

Support
1

I’m trying to make custom stylesheet for rendered Markdown:

.warning
{
background-color: #f9e7e5;
background-image: url(cssImages/icons/Warning-48.png);
background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #c0392b;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
}

But background-image does not appear when i use .warning class. If i use full path to image: “c:/Users/Anisotropy/.config/joplin-desktop/cssImages/icons/Warning-48.png” it works well.
is there any way to use relative paths?

2

Maybe open the console (in Help menu) and see what path it’s actually loading in the Network tab? You might have to add “…/…/…/”, etc. before the path.

3

it tries load image from archive app.asar (C:/Program Files/Joplin/resources/app.asar/gui/note-viewer/cssImages/icons/Warning-48.png)
upd.
Ok, i can use path like this
…/…/…/…/…/…/Users/Anisotropy/.config/joplin-desktop/cssImages/icons/Warning-48.png
but ultimately it will look like an absolute path. And i can move my images in Joplin’s folder to shorten the path.

4

What’s more, is that relative positions may differ on different platforms. In my case, I need to go six steps back on Windows and from there to .config/joplin-desktop/<whatever>. On macOS, it would take zeven steps backward and from there to /Users/<user>/.config/joplin-desktop/<whatever>. As you said, not better than an absolute path. I had hoped for ~/.config/joplin-desktop being the reference point.

5

I thought we established at one point that relative paths with css in Joplin are rather problematic…

6

Actually you could simply encode your image as dataUrl and put it directly in the css, that way no need for an external file. That’s what we do for some icons in Joplin.

1 Like
7

This thread gave me the idea to use * > :first-child {margin-top:0 !important; padding-top:0 !important} to eliminate any top-side padding/margin on the first element of the rendered markdown.