Homepage    |    GitHub    |    API    |    Wiki    |    FAQ

Adding permanent headnotes on every rendered page

Hi, I was wondering is there’s a way to add permanent head notes on every page I end up exporting to .pdf

IMPORTANT: I know that in Joplin’s world, we call Note to the document we’re working on. What I mean by note, is simply a little sentence on top of every page, something similar to “automatically generated page numbers” but sentences (like "Author: pmbarx - Joplin University, 2020). I hope this helps you to understand what I need…

To be clear: I do not want to write down a simple header (### like this). What I need is to permanently a head note (in this case, with the name of the author of the document), and leave it that way, so I can work on my document with no need of adding a new “##header” to every page. I mean, if I choose to export a blank document with 5 blank pages, I still need to show that head note on every page. As if your blank pages from your paper notebook all have a little head note with the brand of the manufacturer of that notebook. Is this clear enough? Sorry for my, probably, bad english.

(maybe this is done by css stylesheets? But I don’t know how…)

I’m currenty using:

Joplin 1.0.227 (prod, win32)

Client ID: 0dc3f26330f34b298c9791a29b425c9c
Sync Version: 1
Profile Version: 30
Keychain Supported: Yes

Revision: 4913fdb8 (master)

Running on Windows 10.

Thank you very much!

1 Like

You can do this by creating a template having that header you want, then using that template whenever you create a new note.

To create a template just create a note with the header you like then click:
File->Export->MD Markdown
then give your template a name and save it in the following folder
image
c;/USER/.config/joplin-desktop/templates
this is where Joplin keeps the templates
now when you want to use it click:
File->Templates/create note from template

Alternatively you can:
1- create a note with the header you want, then duplicate it (right-click on the note in the note list) whenever you want to create a new note, and just change the subject line.

Hope this helps

1 Like

Thank you very much, osman! I’ll be trying your solution and getting back to you with the results.

osman, I just tried your solution, and it works, but it is not what I need. The template adds a head note, yes, the same head note I can type down inside the Note. Imagine the next: we want the pages to have a watermark on the background. So, I work on my Note in Joplin, the Editor and the Preview will or won’t show that watermark, BUT when I export to .pdf, the watermark must show on the background. It’s like, customized paper. I want it to work like the header and footer of MS Word or something like that. No matter how many pages, and what you do while working on the document, the header and the footer will always show, because you set it that way, as a part of the BLANK PAGE and not something I wrote down in the Note itself. Hope this is clear enough… haha! Thank you anyway, I ended up learning something I did not know.

Glad I helped you learn something new, and sorry I didn't get your idea of 'watermark'. I'm not sure if the 'watermark' thing could be done in Joplin. As far as I know it can't be done in Evernote too. Would love to hear the opinion of an expert here if it can be done in Joplin :slight_smile:

Oh, it’s alright, maybe I didn’t explain myself clearly. But, I guess, the idea is: customized sheets. Maybe there’s a way to replace the default blank page that uses to render the document on, for, I don’t know, an A4 picture, or some .png sheet custom model of my own. Maybe the .pdf reader itself should be involved… but, ok, I’ll love to hear other opinions!

1 Like

This isn’t possible with Joplin, but it is possible with more specialized tools like pandoc. In the future there will probably be custom export plugins that integrate with pandoc, but for now you’ll need to copy your note into a markdown file and use a separate tool to do the conversion.

1 Like

I have managed to get such a header on just the first page if that helps?

I added this to userstyle.css. For me it was placed in the @media print section as my userstyle.css differentiates between screen and print.

.exported-note::before {
      content: 'Author: pmbarx - Joplin University, 2020';
}

I tried it on a note of mine called “Joplin - Scratchpad” and when exporting to PDF I got this and it was included on any other note I exported to PDF.

I found this not through having super css skills but by experimenting and searching the Internet as well as Joplin’s GitHub repo. It was a series of what appears to be lucky guesses. I do not know if it causes problems for any other exports so please be kind if other things break!!

I know it’s not quite what you wanted but I could not find a way to apply it to pages as it does not seem to me that the export creates separate pages, just one long HTML page which the PDF creator package then converts.

1 Like

Forgot to mention… it will take other styling…

.exported-note::before {
     font-family: 'Roboto Mono';
     font-size: 10px;
     color: darkgrey;
     content: 'Author: pmbarx - Joplin University, 2020';
}

And you can create a single “footer” after the end of the text

.exported-note::after {
     font-family: 'Roboto Mono';
     font-size: 10px;
     color: darkgrey;
     border-top: 1px solid darkgrey;
     content: 'Author: pmbarx - Joplin University, 2020';
}

2 Likes

Alright! This is closer to what I’m trying to achieve! So, you managed to set the headnote only at the beggining of the document, as you said, on the top of the first page only. I wanted to set that same head note to every page, a friend told me this is possible through html and not css, a whole different story… But, your css tweak will do the job in the meantime! Many thanks!!! And many thanks to everyone who took the time to help me out!!!

PD: This is my first intervention in Joplin forum. So happy about this.

Ok, I will do some research about pandoc. A friend of mine told me that having custom pages, is a html thing. Now this is unknown terrain to me, but I’m telling you this, maybe you come up with another solution focused on html. If you don’t, I’ll be OK anyway, since you already took the time to help me. Thank you so much!

I have no time to experiment right now (but I will, after work), but the https://www.sitepoint.com/css-printer-friendly-pages/ article might be useful, along with the trick above by @dpoulton: it looks like you can surround this CSS with @media print to show it only when printed, and if you use @print, maybe you can get this to repeat on each page.
Again, to try, I never tried print-specific CSS before.

@pmbarx

This slightly modified version of the above css makes the header / footer a little more versatile. The text can now be aligned left / centre / right and the border above the footer now extends the full page width.

.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';
}

Edit:
Added to Share Your CSS.

1 Like

Ok, I’ll check this later! I found this https://www.oxygenxml.com/events/2017/DITA_OT_Day/Using_CSS_to_style_the_PDF_output.pdf Do you see a possible solution there? Thanks!

Thanks for the information sharing
vmware

It is an interesting document, but it doesn’t seem to cover the issue.
I have found https://stackoverflow.com/questions/9729461/creating-page-headers-and-footers-using-css-for-print which points to another standard, https://www.w3.org/TR/css-gcpm-3/
That would be perfect with a code like:

@media print {
	@page {
		@top-right {
			content: "This is the header text";
			/* Possibly with additional styling? */
		}
		@bottom-right {
			content: "This is the footer text";
		}
	}
}

except it seems it doesn’t work in Joplin? These are quite advanced CSS3 stuff, not implemented in all browser engines. Some other tricks, more flexible, need to add HTML tags to the HTML generated by Joplin, but we cannot do that currently (AFAIK).

But somebody else gave a different trick there, using a fixed positioning:

/* Size in points are better in the print medium,
not dependent on the resolution of the printer! */
@media print {
	@page {
		/* Top/bottom vs. left/right margins. */
		margin: 40pt 40pt;
	}

	.exported-note::before {
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 20pt;

		font-family: 'Segoe Print';
		font-size: 10pt;
		background-color: #F0F0F0;
		color: #333;
		justify-content: flex-end;
		content: 'This is the header text --';
	}

	.exported-note::after {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 20pt;

		font-family: 'Segoe Print';
		font-size: 10pt;
		color: darkgrey;
		justify-content: flex-end;
		border-top: 2pt solid darkgrey;
		content: 'This is the footer text --';
	}
}

It is interesting because fixed content is repeated on each page.
Alas, this content is constrained within the margins defined in the @page rule, so it always overlap with the content of the page. I tried various hacks, but none could get out of this box.
And, curiously, I had to add some characters to the contents, to avoid truncation.

I will try and test other things, I think, it is an interesting topic.