Adding color and design like these examples?

I am starting to use Joplin for my homeschool record keeping. I really like what this homeschooling mom did in Evernote, but haven't been able to figure out how to do similar things with Joplin.

I did a search in this forum and on Brave, but couldn't find anything. Would someone point me in the right direction? Thank you!


I had links here to examples, but I guess I can't share links. She had all kinds of colors she selected (and coded in?) to put behind text, photos, etc. She also had small photos and images show up next to her different entries. I think there is also the option of color coding entries according to whichever subject the activity covered so various entries had little colored lines along the top.

Hey Sallie, welcome to the forum!
You can add links as a codeblock before becoming basic trust level user. Which has pretty light requirements like viewing 5 threads or so.
For more info you can visit this guide about those levels

Coming back to the topic, various advanced formatting might be achieved using HTML tags. There's a nice plugin helping paste those

However without the links I'm just guessing.

Thank you for the reply. I think I just got upgraded in the forum so I'll try to share those links again. I know Joplin is much newer than Evernote and works differently so these might not be feasible. But you never know unless you ask!

I'm interested in adding more color, photos, etc. as you can see in these examples. Thank you!

Okay, that helped. As I'm a bit rusty at Evernote, I couldn't tell if expected result should be a note with a coloured background or just an extendable coloured block of text. So I went the lazy way and made a note with a few coloured blocks the same way the author presented the template:

Please note if exported to .pdf or printed the blocks will not fill the page completely, i.e. will have margins as shown here:

You can create the similar one, using same template from your first link but importing the .enex file to Joplin instead of Evernote.

To make your life easier here's the page in Joplin format (.jex) from the preview above you can import to Joplin right away.

Coloured blocks template.jex (5 KB)



Another option, closely related to @graphit0 answer, is to edit the userstyle.css (its location depends on the system) and define colored tags on them. Here is mine CSS, line 194 defines the boxes

It looks like this:

You don't need to define any fixed writing inside it, I just did because it is extremely convenient for my use (taking notes about research)

1 Like

Thank you for the CSS, that's pretty handy!

Kinda similar thing is admonitions, which we have a plugin for: it adds preset coloured blocks.

Although, your solution is much more flexible :relieved:

I had considered doing similar thing via @import url stylesheet.css but I couldn't package it in a neat "import and go" file (without creating a plugin just for that). Also in the future, I feel, it would be great to adopt those coloured blocks with template plugin to speed up the input.

In fact, I did it: here's the same note with the coloured block that allows up to 140 named colours from w3 standard (7 are already in the note). It is also a valid template for template plugin. So, once the plugin installed it could be used right away. If pasted from the plugin, it asks you to choose the colour of the block and you're done.


Colored block.jex (5 KB)