Question or Feature Request? : CSS tricks

Support
21

What’s supported is in the doc. Other things might work but have not been tested and may or may not be officially supported later on.

22

The only information I can find in the docs is:

Rendered markdown can be customized by placing a userstyle file in the profile directory ~/.config/joplin-desktop/userstyle.css [...] This file supports standard CSS syntax.

I haven't been able to find anything about CSS classes and styles that can be applied to the rendering process. Maybe I am missing an important link?

23

I haven’t been able to find anything about CSS classes and styles that can be applied to the rendering process. Maybe I am missing an important link?

Joplin doesn't expose any CSS class. The CSS user style is only to style your own classes (when you use HTML) or to target certain basic elements. For example strong { background-color: yellow } to highlight bold elements in yellow.

There's only minimal support for this because specifying every single HTML element or class that Joplin might generate would not be useful since they might change from one version to another.

24

Okay, fair enough.

I’d suggest to postpone this to some future milestone.

25

Apparently they do, since this works:

body {
    color: red;
}

@media print {
    body {
        color: blue;
    }
}

Joplin displays red, PDF has blue.

26

It seems nobody mentioned it yet, so I’ll just add that HTML already has a tag for highlighting, <mark>.

So <mark>like this</mark> for the text you wish to highlight. (I wish we had an extension for this, adding tags by hand is inelegant and annoying.)

27

Hi, i just tried modifying the print layout via inline css

<style type="text/css">
@media print {
    h1,h2 {display:none;}
}
</style>

Can someone tell me the HTML tag used for displaying the note title as I would like to hide that when printing.

1 Like
28

Unfortunately it’s a div with custom style applied, I’m not sure exactly why this is the case. I think the intention was to clean it up into something better down the road.

29

@CalebJohn, thanks. Can you point me to the source so I can have a look or share some reference code?

30

No problem.

Here’s the function that you want.

31

Awesome - and here is the code that just hides the first div.

Works nicely on Mac. I got to try Window tomorrow.

<style type="text/css">
@media print {
    div:nth-child(1) {display:none; }
}
</style>
32

People complained that when a note was printed, the note title was not included in the printout.

Thus Laurent prepended the title as a h1. Which worked until the toc plugin was added. At that time a printout would all of a sudden have an additional chapter in the toc. This is why I created a separate DIV for the title.

However, Laurent would accept a PR if someone were to add a css tag for the title and used that instead of the div.

33

I am not sure if you found also a different way. This works also

@media print {    
/* css for printing */`   
.exported-note-title {    
   display: none !important;
}