Backlink pane css changes (like Andy Matuschak's)

[Sk180]

I have been noticing that there isn’t a lot of discussing about using CSS on the backlink pane, but Andy Matuschak’s public notes seem to me like a beautiful model of how this could be done:

[ariehen]

CSS can only manipulate or change what’s already there (with a few exceptions using pseudo-classes).

I agree the above looks great and would like the option for something like this, but it’s in plugin territory, I reckon.

[dawni]

@Sk180, looks cool. I took a peek and imitated the backlinks style in your screenshot, with a few embellishments like accenting the link text, keeping the filters, and thinning the font weight:

I use the backlinks pane in the side dock and not in the footer so don’t know how robust this code is for different scenarios, sizing, etc., but it could be a starting point if anyone wants to do more:

.embedded-backlinks .backlink-pane > .tree-item-self {
	&:first-of-type::before {
		content: "Links to this note";
	}
	
	&:nth-of-type(3)::before {
		content: "Possible connections";
	}
	
	&::before {
		font-size: var(--h2-size);
	}
	
	> :is(.tree-item-inner, .tree-item-flair-outer) {
		display: none;
	}
}

.embedded-backlinks .backlink-pane .search-results-children {
	display: flex;
	flex-wrap: wrap;
}

.embedded-backlinks .backlink-pane .tree-item.search-result {
	width: 49%;
	> .tree-item-self {
		font-size: var(--font-ui-large);
		font-weight: var(--font-medium);
		padding-left: var(--size-4-3);
		> :is(.tree-item-icon, .tree-item-flair-outer) {
			display: none;
		}
	}
	> .search-result-file-matches {
		box-shadow: none;
		font-size: var(--text-normal);
		& .search-result-file-matched-text {
			background-color: unset;
			color: var(--text-accent);
		}
	}
}

[Sk180]

This is incredible! Thank you so much for doing this!

[Sk180]

quick question - pardon my ignorance, but it’s not working for me, I tried both adding it as a CSS snippet and adding it into my main theme css (I did this just by starting the code at the end of another section of CSS basically at random) – is there a specific place I should put the code?

[Sk180]

@dawni

[dawni]

Either of those is the way.

Just to be sure, did you do these:

1. Save and enable the snippet.
2. Enable the Backlinks core plugin.
3. Either enable “Show backlinks at the bottom of notes” or use the command palettte (CTRL + P or CMD+P) to select “Backlinks: Toggle backlins in document”.
4. Open a note that has links to it, and scroll to the bottom of the note.

If it doesn’t work, then what theme are you using? It might be conflicting.

To see the snippet working, you could open your sandbox vault, copy say five inter-linked files into it (or just make a few notes with links to one another), do the steps above, and see the results.

[dawni]

Oh sorry, never mind. I had two mistypes in the CSS I posted. I edited it. It should work now. @Sk180

[Sk180]

thank you again so much!