A plugin for Obsidian.MD that allows you to add dividers to the ribbon to space out your icons.
Plugin can be installed from the official plugin list.
Dividers can be added and removed via the settings screen. Once they are added, you can drag them directly in the ribbon to where you want them just like an icon.
To customize the appearance of the dividers, you can utilize CSS to target the element.
/* Example: Change spacing around diver */
.side-dock-actions .side-dock-ribbon-action.ribbon-divider {
padding: 8px 0;
}
/* Example: Change width of divider */
.side-dock-actions .side-dock-ribbon-action.ribbon-divider {
width: 50%;
}
/* Example: Change color of divider */
.side-dock-actions .side-dock-ribbon-action.ribbon-divider &:before {
background-color: #ff0000;
}
If you want to target a specific divider, each divider has a class added that incldues it's unique id (found in settings).
For example, to target a divider with the id 4714cc30-fb33-4da8-857a-a5d6478c9f9a
:
/* Example: Change spacing around a specific diver */
.side-dock-actions
.side-dock-ribbon-action.ribbon-divider.ribbon-divider-4714cc30-fb33-4da8-857a-a5d6478c9f9a {
padding: 8px 0;
}
Unfortunately Obsidian comes with a ribbon icon-order bug where you may have noticed that plugins don't keep the order you arranged them within the ribbon when disabling/re-enabling those plugins (sometimes even when updating them) therefore making the dividers show up in the wrong places as well.
If you find yourself in situations where you have to toggle plugins or if you experience icon ordering issues in the ribbon, then below you'll find a workaround using CSS snippets:
div.clickable-icon { order: 99; }
div[aria-label="Open graph view"] { order: 1; }
div[aria-label="Create new canvas"] { order: 2; }
.ribbon-divider { order: 9 !important; }
+
sibling selector (this is because CSS doesn't have any "nth-class" selector to target dividers specifically):/* second divider */
.ribbon-divider + .ribbon-divider { order: 19 !important; }
/* third divider */
.ribbon-divider + .ribbon-divider + .ribbon-divider { order: 29 !important; }
/* and so on */
/* make sure new icons show up after all current icons */
div.clickable-icon { order: 99; }
/* this plugin changes tooltip when it's clicked, hence the same order '1' */
div[aria-label="Hide hidden folders again"] { order: 1; }
div[aria-label="Show hidden folders"] { order: 1; }
.ribbon-divider { order: 9 !important; }
/* second group of icons */
div[aria-label="Open graph view"] { order: 10; }
div[aria-label="Create new canvas"] { order: 11; }
div[aria-label="Create new drawing"] { order: 12; }
.ribbon-divider + .ribbon-divider { order: 19 !important; }
/* third group */
div[aria-label="Insert template"] { order: 20; }
div[aria-label="Templater"] { order: 21; }
div[aria-label="Open projects"] { order: 22; }
.ribbon-divider + .ribbon-divider + .ribbon-divider { order: 29 !important; }
/* fourth group */
div[aria-label="New encrypted note"] { order: 30; }
div[aria-label="Convert to or from an Encrypted note"] { order: 31; }
div[aria-label="Run local backup"] { order: 32; }
div[aria-label="Open Notion"] { order: 33; }
div[aria-label="Open Todoist"] { order: 34; }
.ribbon-divider + .ribbon-divider + .ribbon-divider + .ribbon-divider { order: 39 !important; }
If you run into any issues with this plugin, please open an issue and incude as much detail as possible, including screenshots.