My private style for Joplin.
It's build on top of the integrated "Dark" Theme included in Joplin.

1. Install the "Font Awesome Free" (Version 5) Font to your PC. Download here, open the Webfonts folder and install the three .ttf files inside
2. Open your userchrome.css and paste the content from this repository. Do the same with userstyle.css
3. Please be sure to use the integraded "Dark" Theme from Joplin. Have a look for this under Tools > Options > Appearance

1. If you want to use my Bullet Journal style, create a new file in the same folder where the userstyles.css is lying. Name the file userstyle-bujo.css
2. Paste the content from this repository, don't forget to install the "Font Awesome Free" font to your local PC
3. At the end of every note, where you want to use this extra style, add this line <style>@import url(C:/Users/<username>/.config/joplin-desktop/userstyle-bujo.css);</style>

Add this code to create a table calendar in you BuJo note.

<div class="calendar">

| Mä. |  Mo. |  Tu. |  We. |  Th. |  Fr. |  Sa. |  Su. |
| --: | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| #40 | *3* <i>🛋️</i> | *4* | *5* | *6* | *7* <i>🩰</i> | *8* <i>🛒🩰</i> | *9* |
| #41 | *10* <i>🎂</i> | *11* | *12* | *13* <i>🍣</i> | *14* | *15* <i>🥂🩰</i> | *16* |
| #42 | *17* | *18* | *19* <i>🎂</i> | *20* | *21* <i>🍵</i> | *22* <i>🩰</i> | *23* |
| #43 | *24* | *25* | *26* | *27* | *28* | *29* | *30* |
| #44 | *31* <i>🛋️</i> | **1** <i>🌴🎷</i> | **2** <i>🌴</i> | **3** | **4** |  **5** | **6** |
</div>

To use this message boxes, copy this to your note in Joplin.

<b-notice>
  <b>NOTICE:</b> This is a notice box
</b-notice>

<b-help>
  <b>HELP:</b> This is a help box
</b-help>

<b-success>
  <b>SUCCESS:</b> This is a success box
</b-success>

<b-warning>
  <b>WARNING:</b> This is a warning box
</b-warning>

<b-error>
  <b>ERROR:</b> This is a error box
</b-error>

<b-construction>
  <b>CONSTRUCTION:</b> This is a construction box.
</b-construction>

For better view add following line at the starting of mermaid syntax. (Thanks to https://github.com/KedarGhadge for this addition.)

%%{init: { "theme": "dark" } }%%

I use the following Plugins which are already designed by me:

• Copy Anchor Link
• Markdown Table: Colorize
• Note Tabs
• Outline
• Templates

• Install the Plugin and restart Joplin
• Create a new note, insert one message code from above to the note and add the template-tag

If you want to use my Outline Plugin style from the images, then add the following CSS line to Tools > Options > Outline > "Show Advanced Settings" > "User Style".

.outline-content {background:#2E3138; padding:5px 0;} .toc-item-link {height:30px, font-size:13px; display:flex !important; align-items:center; text-indent:-20px;} .toc-item-link > * {padding:0 0 0 12px;} .toc-item-link:hover {font-weight:normal; text-decoration:none; background:#4E4E4E; cursor:default;} a#header {color:#ffffff; height:30px; line-height:30px; padding:0 0 0 6px;} a#header::before {content:"\e917"; font-family:"icomoon" !important; font-size:18px; color:#ffffff; margin:0 8px 0 0; font-weight:300; top:3px; position:relative;}

I found the design for the headers in another project, but forgot to save the source. If someone knows from whom this was, I would be really glad to add a source link 😊