Obsidian Draw Steel CSS Snippet

This repo provides the draw-steel.css Obsidian CSS snippet for the Obsidian note-taking app.

In this image: Demo of Draw Steel ability written as a single note. Non-default Obsidian theme used called "Maple"

How to install

These are instructions for adding the CSS snippet to Obsidian.

1. Open the draw-steel.css file in this repo, and copy the contents (Ctrl+A then Ctrl+C, or click the "Copy raw contents" button)
2. In Obsidian, open the "Settings" menu (gear icon, bottom right)
3. In Obisidian's setting menu, navigate to "Appearance"
4. In the "Appearance" settings tab, in the first section, click into the "CSS Snippets"
5. In the "CSS Snippets" view, click the folder icon to open the CSS snippets folder
6. Create a new draw-steel.css file in this folder, and paste the contents into the file. Save the changes.
7. In the "CSS Snippets" view, click the "Reload snippets" button, and enable the snippet.

Features

For any note where you add the draw-steel-ability value to the cssclasses property of the note:

• Header font matching Draw Steel book, with underline
• Inline code blocks matching Draw Steel math glyphs like M < WEAK
• Simple table styles to match Draw Steel ability quick facts
• Task bullet styling for writing power roll tables (credit to "Draw Steel Elements" plugin for the CSS to make this work)

Power Roll Table Bullets

To write power roll tables in Obsidian, write a task bullet list with the tier number inside the task brackets, like so:

- [1] Tier 1 result
- [2] Tier 2 result
- [3] Tier 3 result

Remember, the spacing is important; there should be 1 space between the - and [1], and at least one space after the [1].

Math Glyphs

For writing math glyphs such as A < AVERAGE, simply write inline code blocks beginning and ending with ` ticks.

Other Symbols

I have not yet added the other symbols to this snippet. Contributions are welcome! A good place to start may be the collection of .svg symbols found in the Draw Steel Symbols Font project.

For now, I use emojis for the most common things, such as 📐 for denoting range, and 🎯 for denoting target of the ability.

Comparison to Draw Steel Elements

This CSS snippet was made after downloading the very helpful Draw Steel Elements Obsidian plugin for using Draw Steel in Obsidian, but finding it difficult to work with the ds-feature code block to edit ability blocks.

The goal of this plugin is to ease the authoring/editing of Draw Steel ability blocks. It's not meant as a replacement for Draw Steel Elements' content downloading system, or any other features they have or will include.

Issues & Contributions

Creating issues for this CSS snippet is welcome; there will likely be some styling bugs that I have missed. The issue ticket template will guide you through what to include in your ticket.

Contributions are also welcome! Please create a ticket or pull request, and I'll review when able.