# Obsidian - ITS Theme ![[images/Obsidian-ITS-Theme.webp]] [Watch on YouTube](https://www.youtube.com/watch?v=REWIpb1oxjU) · 26:00 · Josh Plunkett · 2024-05-06 ## Outline ### 00:00 Intro - People often ask Josh how he makes his notes look like they came out of a book. His answer is the **ITS Theme** by **SlRvb**, a theme built by a member of the TTRPG community for that community. - The right-hand wiki tables, left/right image placement, columns and many of the callouts in his videos all come from ITS. So many community shares rely on it that you'll probably run into it eventually. - **01:33** You don't have to use the look. The theme and the **CSS snippets** that provide its features are separate, and the snippets can be downloaded on their own and used over another theme. ### 02:07 Installation - With the theme turned off (Settings → Appearance), images sit on the left at full size. Josh uses light mode ("I'm getting old"). - Go to **Manage**, search "ITS", find SlRvb's theme (about 116,000 downloads), then click **Use** to install it. ![[images/Obsidian-ITS-Theme-t0305.webp]] - **03:37** Read the theme's README, since modern themes add features. Its extra requirements: - The **Style Settings** plugin. - **Two CSS snippets** that add the extra icons and fonts. ("My fonts don't look like yours" means these are missing.) - **04:37** Install Style Settings from Community plugins. Open each snippet's GitHub link and click **Download raw file**. - **05:40** In Appearance → **CSS snippets**, click the folder button. It opens (or creates) `.obsidian/snippets` inside the vault. Copy the two files in, click reload, and enable both. ### 07:19 Alternative themes (colour schemes) - Settings → **Style Settings** → ITS Theme has many options (header sizes, colours and more). Josh doesn't tweak them and uses ITS as it comes. - Under **Alternate color schemes → TTRPG settings** you can choose Wizards of the Coast / D&D Beyond, SlRvb's own D&D style, Pathfinder, or **Pathfinder Remaster**. Josh keeps one vault per system, each coloured to match (D&D 5e vault vs PF2e Remaster vault). ![[images/Obsidian-ITS-Theme-t0820.webp]] - Because it's all markdown, you can switch themes whenever you get bored. ### 10:11 Install with another theme - Example: switch to the **Prism** theme. Then open the ITS documentation site. Pages such as Image adjustments, Callout adjustments and Embed adjustments have their CSS snippet linked at the top. Download the snippets, put them in the snippets folder, and enable them. You get the ITS features with the theme you prefer. - Josh switches back because Prism is "making my eyes bleed". ### 12:02 ITS image adjustments - A standard embed `![[image.png]]` shows the image full-size and left-aligned. - Add `|right` to float it right. In **Live Preview**, `right` alone doesn't work, so use `|right lp` (lp = live preview). Add a size such as `|300`, which Josh finds works for a single screen page. ![[images/Obsidian-ITS-Theme-t1250.webp]] - **13:25** Why he uses Live Preview as his default editing mode: it gives you the GUI for tables and properties. He's still getting used to it. - **14:56** A trick from SlRvb: a floated image on its own line is hard to click into in Live Preview. Put the embed on the same line as some other text, followed by a space, so you can click that line to edit it. - `left` and `center` also work, and Josh uses them all the time. ### 17:11 ITS wiki-style table - He inserts a **wiki-style infobox callout** from a template (Alt+T → "right"). It only shows aligned right in **Reading view**, which is the cause of most "why isn't my ITS right-hand thing working" questions. ![[images/Obsidian-ITS-Theme-t1745.webp]] - You can edit the title, name fields and the table values. Change the image (a rock picture in his example). The `cover small` modifier shrinks big images. - Right-aligned images and this infobox, plus the overall D&D/Pathfinder look, make up 90–98% of how Josh uses ITS. ### 20:18 Check the documentation - The ITS docs cover alternate colour schemes (with previews), alternate checkboxes, image positioning (for example `|...tiny-w tiny-h` style modifiers to centre a monster's head), sizes, and **banners**, which can replace the Banners plugin when it breaks. ![[images/Obsidian-ITS-Theme-t2045.webp]] - **21:41** Callout adjustments (multi-column layouts, sides), embed adjustments, heading styles and folder styles. Separate videos on callouts and adjustments are planned. - **23:16** Why Josh sticks with ITS: it looks good and is easy on his eyes even in light mode. It's usually fixed within 2–3 hours when something breaks, unlike abandoned themes. Someone else has done the colours for him. ### 24:19 Community and support - obsidianttrpgtutorials.com has Getting Started, plugin tutorials and community-supported games (Pathfinder 2e Remaster, D&D). The **Obsidian TTRPG Community Discord** is the quickest place to get answers. ## Things Mentioned ### Themes, plugins and snippets - **ITS Theme** (SlRvb): an Obsidian community theme designed for TTRPGs. Free. Optional support at [ko-fi.com/slrvb](https://ko-fi.com/slrvb) - **ITS CSS snippets**: the two required snippets (icons and fonts), plus standalone feature snippets (image, callout and embed adjustments) on the ITS documentation site. Free. - **Style Settings** (community plugin): adjusts theme and plugin options, including ITS colour schemes. Free. - **Prism** theme: used as the "another theme" example. Free. - **Banners** plugin: mentioned as something the ITS banners can replace. Free. - **Templater-style templates (Alt+T)**: Josh's template for the right-hand infobox callout. - **Obsidian** settings: Appearance → Manage themes, CSS snippets folder (`.obsidian/snippets`), Editor → default editing mode (Live Preview vs Source), Reading view. ### TTRPG systems and styles - ITS colour schemes for **D&D Beyond / Wizards of the Coast**, D&D (SlRvb's style), **Pathfinder** and **Pathfinder 2e Remaster**. - Pathfinder adventure *Malevolence*, shown as an example note. ### Websites - [obsidianttrpgtutorials.com](https://obsidianttrpgtutorials.com/): free tutorials. - **Obsidian TTRPG Community Discord**: free. - [Josh's Patreon](https://www.patreon.com/JPlunkett): paid. - **GitHub**: where you get the snippet files (Download raw file). ## Bios ### Josh Plunkett Josh Plunkett is an Australian game master and YouTuber who makes tutorials on running tabletop RPGs in Obsidian. He runs the Obsidian TTRPG Community, builds tools for game masters, and sells the TTRPG Foundation Vault through Patreon. ### SlRvb SlRvb is a member of the TTRPG community who created and maintains the ITS Theme for Obsidian, along with its documentation and CSS snippets. The theme is known for book-style TTRPG layouts and for being fixed quickly when Obsidian updates break something.