Rotulus
SNIPPET
al-sazed

Rotulus

An Obsidian CSS snippet that transforms callouts into scroll-style, parchment-themed panels

📜 Rotulus

An Obsidian CSS snippet that transforms callouts into scroll-style, parchment-themed panels.



✨ Overview

image



🚀 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).


Desktop

  1. Open Settings .
  2. Go to Appearance → CSS snippets and select Open snippets folder .
  3. Move or paste your rotulus.css file into this folder.
  4. In Obsidian, select Reload snippets .
  5. Enable Rotulus by toggling the switch on.

Mobile / Tablet

  1. Open your file manager and locate your vault (check the location under Manage vaults... if needed).
  2. Open the Configuration folder and create a folder named snippets if it doesn't exist.
  3. Move or paste your rotulus.css file into this folder.
  4. Open Obsidian's Settings → Appearance.
  5. Scroll down to CSS snippets and tap Reload snippets .
  6. 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

image

⚠️ Note: If you have a large monitor/screen then your background may crash like that.



Solve :

image
  • 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 🥹

Related

How to Install

  1. Download the repository ZIP below
  2. Unzip it and find the CSS snippet file
  3. Move the CSS file into your vault's .obsidian/snippets/ folder
  4. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it

Stats

Stars

6

Forks

0

License

MIT

Last updated 2mo ago

Categories