Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/chrisgrieser/shimmering-focus/llms.txt

Use this file to discover all available pages before exploring further.

Many of the visual features built into Shimmering Focus are also available as self-contained CSS snippets. Each snippet is a single file that you can drop into any Obsidian vault — they are not exclusive to the Shimmering Focus theme. This means you can pick individual features you like and combine them with whatever theme you currently use.

​
Installing a snippet

1

Download the snippet file

Browse to the snippets/ folder in the Shimmering Focus GitHub repository and download the .css file you want. You can right-click the Raw button and choose Save link as…, or click the file, then click the download icon.
2

Place the file in your vault

Copy or move the downloaded .css file into your vault’s .obsidian/snippets/ folder. If the snippets folder does not exist yet, create it.
3

Enable the snippet in Obsidian

Open Settings → Appearance, scroll to the CSS snippets section, and flip the toggle next to the snippet’s filename. The change takes effect immediately — no restart required.
All snippets in this list work with any Obsidian theme, not only Shimmering Focus. They are independent, reusable CSS files.

​
Available snippets

Gives a curated set of semantic tags a distinctive colored-badge appearance when used inline (not in YAML frontmatter). Each tag gets its own background color and an emoji suffix, making tag types immediately recognizable at a glance.Supported tags: #agree, #critique, #data, #definition, #disagree, #epistemic-break, #example, #gap, #goal, #hypothesis, #idea, #important, #litreview, #main, #method, #question, #quote, #sidenote, #summary, #todoWhen to use it: Ideal for literature notes, reading logs, or any notes where you annotate source material with typed observations. Requires Obsidian installer version 1.5.3 or higher.
/* Tags that are emphasized when used inline (not in the YAML frontmatter).
   They are meant as visual guides for literature notes. */
.tag:is([href="#agree"], [href="#critique"], /* … */) {
    border-radius: var(--tag-radius);
    color: hsl(0 0% 100%);
    font-weight: 700;
    padding-right: 6px;
    padding-left: 6px;
}
Centers the text inside Canvas cards and shrinks connection-path labels. Designed for users who use Canvas purely for quick sketching with text cards rather than embedding full notes.When to use it: Enable this when your Canvas boards consist mainly of floating text cards and you want a tighter, more presentation-like look. The Shimmering Focus theme also registers a command to toggle this behavior from the command palette. Requires Obsidian installer version 1.1.9 or later.
/* Centers canvas cards and shrinks labels. */
.canvas-node:not(:has(.canvas-node-label)) .markdown-preview-view {
    text-align: center;
    font-family: var(--font-interface);
}

.canvas-path-label {
    font-size: calc(var(--font-ui-small) * var(--zoom-multiplier));
}
Automatically hides the tab bar when there is only a single tab open, reclaiming vertical space. When a second tab is opened, the tab bar reappears. This is also the default behavior built into the full Shimmering Focus theme.When to use it: Use this snippet to get Shimmering Focus’s tab-bar behavior while using a different theme, or to restore it if you have disabled the full theme feature. Requires Obsidian installer version 1.1.8 or later.
/* Hide tab bar when only one tab */
body:not(.is-mobile) .mod-root
    .workspace-tab-header-container:not(:has(.workspace-tab-header + .workspace-tab-header)) {
    display: none;
}
Draws a 2 px outline in your accent color around whichever table cell is currently being edited. Makes it easy to track your position in large tables.When to use it: Enable this whenever you frequently edit tables in Live Preview and want a clear visual anchor for the active cell. Requires Obsidian installer version 1.1.9 or later.
/* Obsidian 1.5: Active Table Cells */
.table-cell-wrapper:has(.cm-s-obsidian) {
    outline: 2px solid var(--color-accent);
}
Renders the alt-text of embedded images as an italicized caption below the image, and centers the image horizontally in the view. Images whose alt-text matches their filename extension (e.g. ends in .png) are excluded to avoid showing raw filenames.This is the standalone version of a feature built into Shimmering Focus. The full theme offers a Style Settings toggle (Images: No alt-text as caption) to disable it.When to use it: Use this with any theme when you want meaningful alt-text to double as visible captions without any additional plugin.
/* add alt-text of images as caption */
.image-embed[alt]:not([alt$=".png"], [alt$=".jpg"], [alt$=".jpeg"], [alt$=".tiff"])::after {
    content: attr(alt);
    font-style: italic;
    color: var(--text-muted);
}
Adds a first-line indent to each paragraph and removes the vertical spacing between consecutive paragraphs in Reading Mode — matching the typographic convention used in printed books.When to use it: Enable this for vaults that contain long-form prose, essays, or fiction that you read in Reading Mode. The full Shimmering Focus theme exposes this as the First-line indent & no spacing between paragraphs (reading mode) Style Settings toggle.
/* indented text paragraphs & no spacing between paragraphs */
div:has(> p) + div > p {
    text-indent: 1.5em;
    margin-top: 0;
}
Adds small labels showing the minimum and maximum values at each end of every <input type="range"> slider in Obsidian’s settings UI. Useful when you want to know the full range of a setting without having to read its description.When to use it: Enable this globally to make slider controls throughout all settings panels and community plugin UIs more informative.
input[type="range"]::before {
    content: attr(min);
}

input[type="range"]::after {
    content: attr(max);
}
Moves the fold arrows in the Longform plugin’s scene list to the right side for proper visual alignment. Addresses a known layout issue in the Longform plugin (longform#140).When to use it: Enable this if you use the Longform plugin and find the fold/collapse arrows misaligned in the scene list panel.
/* put fold arrows to the right for proper alignment */
body #scene-list .scene-container {
    display: flex;
    flex-direction: row-reverse;
}
Automatically disables the readable line length constraint whenever the current note contains a table, in both Source/Live Preview and Reading Mode. The rest of the note is unaffected.When to use it: Enable this when you have wide tables that get cut off by the readable line length setting and you do not want to manually toggle the setting per note. The full Shimmering Focus theme exposes this as the Automatically disable readable line length on notes with tables Style Settings toggle. Requires Obsidian installer version 1.1.8 or later.
/* automatically turn off readable line length when there is a table */
body:not(.is-mobile) .markdown-source-view:has(table),
body:not(.is-mobile) .markdown-preview-view:has(table) {
    --file-line-width: 100%;
}
Replaces absolute line numbers in the gutter with relative line numbers — showing the distance from the cursor line — up to 9 lines above and below. The current (absolute) line number is always displayed in full.When to use it: Enable this if you use Obsidian’s vim mode and rely on relative line numbers for motion commands such as 5j or 3k. Also requires Line numbers to be enabled in Settings → Editor. The full Shimmering Focus theme provides this as the Relative line numbers Style Settings toggle. Requires Obsidian installer version 1.1.8 or later.
/* relative line numbers (for vim mode) */
body:not(.is-mobile) .cm-lineNumbers .cm-gutterElement:not(.cm-active) {
    font-size: 0;
}

body:not(.is-mobile) .cm-lineNumbers .cm-active,
body:not(.is-mobile) .cm-lineNumbers *::before {
    font-size: 0.85rem;
}
Abbreviates the Word Count core plugin’s status-bar labels from word and character to w and c, saving horizontal space in the status bar.When to use it: Enable this when the status bar feels crowded and you want a more compact word-count display. Works with the Word Count core plugin. You may need to adjust the --cut-off-for-word and --cut-off-for-character CSS variables in the file if your chosen font renders differently.
/* Shorten `word` & `character` to `w` & `c` */
body {
    --cut-off-for-word: -2rem;
    --cut-off-for-character: -4.94rem;
}
Renders trailing spaces (beyond a single space) as visible · dots in the editor. This is particularly helpful when using the markdown “two space rule”, where exactly two trailing spaces on a line produce a hard line break.When to use it: Enable this when authoring markdown that will be rendered by a strict parser and you need to be certain of your line-break encoding. The full Shimmering Focus theme includes this behavior by default and exposes it as the Hide trailing spaces Style Settings toggle.
/* show trailing whitespace, when there is more than one */
body:not(.hide-trailing-whitespace) .view-content
    > .cm-s-obsidian > div > .cm-scroller > .cm-sizer
    > .cm-contentContainer > .cm-content > .cm-line
    > :is(.cm-trailing-space-a, .cm-trailing-space-b, .cm-trailing-space-new-line)::after {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-faint);
    content: "·";
}
To use a snippet directly from GitHub without cloning the repository, navigate to github.com/chrisgrieser/shimmering-focus/tree/main/snippets, click the file you want, click the Raw button, then save the page (Ctrl/Cmd+S) as a .css file into your .obsidian/snippets/ folder.

Build docs developers (and LLMs) love

Get started for freeTalk to us