Share your CSS

Fixed Header / Footer

In this thread a user asked if it was possible to add a fixed header and footer to every page of printed / exported PDF note. The idea was that the text was not part of the note text itself, more a “watermark”.

Whilst the user was looking for the text to appear on every page, the below CSS inserts a set line of text at the start of a printed note / exported PDF and at the end as well. I am not aware of a way of adding a variable value to this text using just CSS, so, no dates, usernames, version info etc.

The text gets added to every printed or PDF exported note. You cannot be selective. The font defined here is Google’s “Roboto Mono” so please replace with a font on your system if you do not have that one. Being custom CSS, which is an unsupported feature, there is no guarantee that this will continue to work with all future Joplin releases.

I am not a programmer but it appears to me that Joplin prepares a note as a single HTML page before sending it to print or the PDF generator. This CSS “injects” the fixed text into that HTML. That means that it may not actually be possible to add the fixed text to every page of a multi-page note. If anyone can work out a way to add the text to every page please post a reply here.

Copied to this thread in case anyone else is searching for something similar.

userstyle.css

.exported-note::before {
    font-family: 'Roboto Mono';
    font-size: 10px;
    color: darkgrey;
    display: block;
    text-align: right;
    content: 'This is the header text';
}
.exported-note::after {
    font-family: 'Roboto Mono';
    font-size: 10px;
    color: darkgrey;
    display: block;
    text-align: right;
    border-top: 1px solid darkgrey;
    content: 'This is the footer text';
}

Above CSS as PDF

Another Example

6 Likes