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 AppearanceCSS 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 15d ago

Categories