Replace plugins with pinned notes (with custom icons)

Share & showcase
1

I have replaced plugins using notes pinned to sidebars. For instance, I decided to replace the Dangling links panel plugin with a pinned note that would do the job. The plugin works fine, but it has not been updated in 2 years, and I wanted to stop depending on it.

The pinned note even has its own custom icon.

image

I started with a custom note (which uses the Obsidian Dataview plugin:

---
title: Dangling Links
cssclasses: dangle-dashboard
---

# Dangling Links

```dataviewjs  
let r = Object.entries(dv.app.metadataCache.unresolvedLinks).filter(([k,v])=>Object.keys(v).length) .flatMap(([k,v]) => Object.keys(v).map(x=>dv.fileLink(x)));
dv.list([...new Set(r)]);
```

I opened the note in ‘Reading’ mode and dragged its tab to place it on a sidebar.

Next, I styled the sidebar panel using a custom CSS snippet:

/* Dangling Links Panel */

/* Remove extra whitespace */
.mod-right-split .markdown-preview-view.markdown-rendered.dangle-dashboard {
  padding-top: 0;
}

.mod-right-split .markdown-preview-view.markdown-rendered.dangle-dashboard h1 {
  margin-top: 0;
  margin-bottom: 6px;
}

.mod-right-split .markdown-preview-view.markdown-rendered.dangle-dashboard ul {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Expand lines to full width (requires Contextual Typography plugin) */
.contextual-typography .markdown-preview-view.is-readable-line-width.dangle-dashboard .markdown-preview-sizer>div
{
  --max-width: 100%
}

/* Add a custom icon to the tab */
.workspace-tab-header[aria-label="Dashboard - Dangling Links"] .workspace-tab-header-inner-icon {
  content: "";
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position-y: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23879a09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71'%3E%3C/path%3E%3Cpath d='m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71'%3E%3C/path%3E%3Cline x1='8' y1='2' x2='8' y2='5'%3E%3C/line%3E%3Cline x1='2' y1='8' x2='5' y2='8'%3E%3C/line%3E%3Cline x1='16' y1='19' x2='16' y2='22'%3E%3C/line%3E%3Cline x1='19' y1='16' x2='22' y2='16'%3E%3C/line%3E%3C/svg%3E");
  background-size: 18px 18px;
}

/* Remove the pin and the native file icon */
.workspace-tab-header[aria-label="Dashboard - Dangling Links"] .workspace-tab-header-status-container,
.workspace-tab-header[aria-label="Dashboard - Dangling Links"] .workspace-tab-header-inner-icon svg {
  display: none;
}

A few notes about the snippet:

  • The aria-label in the icon section is the filename of the pinned note.
  • The icon is SVG image (I use icons from Lucide to be consistent with Obsidian native icons). You must URL encode the SVG (I use this encoder.)
  • In the last section, the first line (ending in “status-container”) hides the Pinned indicator.
  • In the encoded SVG the “stroke=” value is the render color of the icon. The last six characters inside the quotes is the HEX color code. So, to render the icon black (#000000) it would be stroke="%23000000"

Activate the snippet and enjoy.

6 Likes
2

Nice — keeping it simple(-ish).

Note that this won’t work on Mobile because there’s no way to put notes in the sidebars (it can happen somehow because I have one there but I don’t know how it got there).

3

Found this very useful in applying a custom icon in the sidebar. To get this working on mobile you will need the following styles. You will need to know the row the index of the child to target it. And some css to replace the text to what you want.

.workspace-drawer-tab-options .workspace-drawer-tab-option-item:nth-child(4) .workspace-drawer-tab-option-item-title {
  text-indent: -9999px;
  line-height: 0;
}
.workspace-drawer-tab-options .workspace-drawer-tab-option-item:nth-child(4) .workspace-drawer-tab-option-item-title::after {
  content: "Today";
  text-indent: 0;
  display: block;
  line-height: initial;
}

.workspace-drawer-tab-options .workspace-drawer-tab-option-item:nth-child(4) .workspace-drawer-tab-option-item-icon svg {
  display: none;
}

To get the pinned note into your mobile obsidian. Just edit the workspace-mobile.json file that has been synched from your vault. You need to add an entry to the right element and it should show up in obsidian.

4

Make that

.workspace-drawer-tab-options .workspace-drawer-tab-option-item:nth-child(4) .workspace-drawer-tab-option-item-icon {
    content: "";
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml")
}

.workspace-drawer-tab-options .workspace-drawer-tab-option-item:nth-child(4) .workspace-drawer-tab-option-item-icon svg {
  display: none;
}