Custom styling - chrisgurney/obsidian-note-toolbar GitHub Wiki

If you're comfortable writing CSS, read on; if not, consider using the Style Settings plugin to further style your toolbars.

Apply styling to all toolbars (CSS snippets)

Override any aspect of Note Toolbar's styling with CSS snippets ↗.

Any modifications done in a CSS snippet will apply to all toolbars, unless you're applying specific classes (see below).

Read about styling tips.

Apply styling to specific toolbars

Using the Custom styles section with a CSS snippet, you can define custom classes that you can apply to one or more specific toolbars.

[!note] Custom styles are not included in shared toolbars or copied to callouts.

How to use Custom styles

Create a new CSS snippet file ↗ in your vault's snippets folder (e.g., NoteToolbarSnippets.css). Confirm this file is available and enabled, in Obsidian's settings, under Appearance → CSS snippets.
In the CSS file, make sure it starts with the below, in order to target the toolbar element:

.callout[data-callout="note-toolbar"] {

}

Add one or more classes to your CSS. Note there should be no space between the & and each class name.

.callout[data-callout="note-toolbar"] {

  &.my-custom-class {
    background-color: red !important;
  }

  &.my-other-custom-class {
    border-radius: 0.5rem;
    border-color: blue;
  }

}

Back in your toolbar's settings, add one or more of the above classes to a toolbar's Styles → Custom setting separated by spaces. Refer also to the above screenshot. Your changes should now be visible on your toolbar.

my-custom-class my-other-custom-class

In addition, any changes you make to the CSS snippet classes should now be immediately visible on your toolbars.

Apply styling to callouts

Add your own styles to Note Toolbar Callouts with CSS snippets:

Create a new CSS snippet file ↗ in your vault's snippets folder, or use the same one in the above example.
In the CSS file, make sure it starts with the below, in order to target toolbar callouts:

.callout[data-callout="note-toolbar"] {

}

Add one or more custom callout styles to your CSS, e.g., customcallout. Note there should be no space between the & and the new style.

.callout[data-callout="note-toolbar"] {

  &[data-callout-metadata*="customcallout"] {
    background-color: green !important;
  }

}

In any callout, just add the style name in the first line of the callout:

> [!note-toolbar|border-even-customcallout]
> - [Home](/chrisgurney/obsidian-note-toolbar/wiki/Home)
> ...

💡 Tips

Refer to styles.css, particularly the body section, for the core set of variables that can be easily overridden.
Some rules may require !important to take effect (e.g., background-color: red !important;).
To style menus, Obsidian's native menus option must be disabled: Settings → Appearance → Native Menus
Consider creating classes that you can apply to more than one toolbar with common styling. However, if you want all your buttons across toolbars to look similar, for example, just override the default button styling.

Styling the active file item

File items are given a data-active-file attribute, if the file you're currently viewing matches the item's filename. This allows you to optionally style a button as if it was a tab. If you'd prefer a different style from the tab file item default style, create a CSS snippet such as the following:

.callout[data-callout="note-toolbar"] {
  li[data-active-file] {
    border-bottom: 1px solid var(--link-color);
    & span.external-link {
      color: var(--link-color);
      filter: unset;
    }
  }
}