An Obsidian CSS snippet that transforms callouts into scroll-style, parchment-themed panels.
✨ Overview
🚀 QuickTry
Simply use the [!vintage] callout type in your notes:
> [!vintage]+ Rotulus
> _ Rotulus *(plural rotuli)* is a long, narrow strip of papyrus or parchment wound vertically around a wooden rod ... _
🗒️ Note: " + or - " After the callout type make the callout collapsible.
⚙️ Installation
Follow these simple steps to use Rotulus in your Obsidian vault:
1. Get the CSS File
Download the rotulus.css file from the repository.
⚠️ Note: To deliver realistic visuals (background of the callouts), this snippet uses embedded Base64 (~2.13 MB). GitHub cannot preview files of this size, so please download the rotulus.css file directly and move it to your .obsidian/snippets/ folder.
If you wish to customize it, open the downloaded file in a local code editor (like VS Code).
Scroll down to CSS snippets and tap Reload snippets.
Enable Rotulus by toggling the switch on.
🛠️ Config
Callout Background Customization
A Base64-encoded background image is embedded in the CSS to make the Obsidian callouts look more realistic. You can replace it with your own image using Base64 encoding.
Important Tips:
Keep Image Size Small: Use small or compressed images for better performance.
Use VS Code: Edit the CSS file using VS Code (or any proper code editor) instead of basic editors like Notepad++ to avoid lag caused by long Base64 strings.
Note: If you don't want to deal with editing, you can simply use the file as-is without changing anything!
🚩 Trouble
⚠️ Note: If you have a large monitor/screen then your background may crash like that.
Solve :
Open the downloaded file in a local code editor (like VS Code).
Go to 116th line, then just increase the width.
🩵 Thank You for Visiting!
If you find this repo useful or helpful, please consider giving it a ⭐️ Star!
It means a lot to me 🥹