Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AngelCrawford/joplin-theme
My private style for Joplin. It's build on top of the integrated "Dark" Theme included in Joplin. Inclusive a special Bullet Journal CSS style.
https://github.com/AngelCrawford/joplin-theme
Last synced: 13 days ago
JSON representation
My private style for Joplin. It's build on top of the integrated "Dark" Theme included in Joplin. Inclusive a special Bullet Journal CSS style.
- Host: GitHub
- URL: https://github.com/AngelCrawford/joplin-theme
- Owner: AngelCrawford
- Created: 2021-03-09T20:43:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-16T19:29:22.000Z (10 months ago)
- Last Synced: 2024-08-01T16:37:51.079Z (3 months ago)
- Language: CSS
- Homepage:
- Size: 1.18 MB
- Stars: 71
- Watchers: 5
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-joplin - AngelaCrawford's custom style - [UI], [Editor], [Fonts], [Dark]. (Themes)
README
**My private style for [Joplin](https://joplinapp.org).**
It's build on top of the integrated "Dark" Theme included in Joplin.
# Usage
1. Install the "Font Awesome Free" (Version 6) Font to your PC. [Download here](https://use.fontawesome.com/releases/v6.4.0/fontawesome-free-6.4.0-web.zip), open the Webfonts folder and install the three .ttf files inside (you don't need to install the `fa-v4compatibility.ttf`)
2. Open your `userchrome.css` and paste the content from this repository. Do the same with `userstyle.css`. You will find these files under `C:\Users\\.config\joplin-desktop`.
3. Please be sure to use the integraded "Dark" Theme from Joplin. Have a look for this under `Tools > Options > Appearance`
## Bullet Journal usage
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 `@import url(C:/Users/<username>/.config/joplin-desktop/userstyle-bujo.css);`
### Bullet Journal Calendar usage
Add this code to create a table calendar in you BuJo note.
```markdown
| May | Mo. | Tu. | We. | Th. | Fr. | Sa. | Su. |
| --: | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| #40 | *3* 💉 May | *4* | *5* 🚗 | *6* | *7* 🩰 | *8* 🛒🩰 | *9* |
| [#41](:/Joplin_Internal_Link) | *10* 🎂 | *11* | *12* | *13* 🍣 | *14* | *15* 🥂🩰 | *16* |
| #42 | *17* | *18* | *19* 🎂 | *20* | *21* 🍵 | *22* 🩰 | *23* |
| #43 | *24* | *25*🌴🎷 | *26* | *27* | *28* 🌴 | *29* 🌴 | *30* 🌴 |
| #44 | *31* 🛋️ | **1** April | **2** 🌴 | **3** | **4** | **5** | **6** |
```
## Message usage
To use this message boxes, copy this to your note in Joplin.
```html
NOTICE: This is a notice box
HELP: This is a help box
SUCCESS: This is a success box
WARNING: This is a warning box
ERROR: This is a error box
CONSTRUCTION: This is a construction box.
```
## Mermaid Dark mode usage
For better view add following line at the starting of mermaid syntax.
(Thanks to https://github.com/KedarGhadge for this addition.)
```
%%{init: { "theme": "dark" } }%%
```
# Used Plugins
I use the following Plugins which are already designed by me:
- [Copy Anchor Link](https://github.com/hieuthi/joplin-plugin-copy-anchor-link)
- [Markdown Table: Colorize](https://github.com/hieuthi/joplin-plugin-markdown-table-colorize)
- [Note Tabs](https://github.com/benji300/joplin-note-tabs)
- [Outline](https://github.com/cqroot/joplin-outline)
- [Templates](https://github.com/joplin/plugin-templates)
## Templates Plugin
* Install the Plugin and restart Joplin
* Create a new note, insert one message code from above to the note and add the `template`-tag
## Outline Plugin
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".
```css
.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;}
```
# Question
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 😊