Turning any link into big boxes (similar styling when linking to embedded files)

When I embed a file (attached from within the vault) into a note, the preview shows a nice big box around the linked item, instead of the usual small link.

You can see the box here: 2021-05-09_19-05-22

The code for the note is:

![[test 1.txt]]


The first line makes the nice box, the second line just creates the usual hyperlink style.

It seems that the nice box only happens if it’s an internally linked (attached) item. It does not happen when I just create a link to another note, or to an externally linked file or URL.

I think the box around the links are really nice. So my question is, if it’s possible to create the boxes around any type link (attached file, external file/folder, note, web URL)? And also if it’s possible to change the icon for the box?

Either through using shortcodes or perhaps through CSS styling? If CSS, does anyone know the classes I should be looking for?

Thanks a lot!

Based on some of the themes I have seen, I can’t imagine that it isn’t possible. So you could download and pick apart the css of various themes to try to figure it out.

Or, you may be able to find something here in this extremely helpful collection that @Klaas originally put together: "How to achieve" CSS code snippets

If you are knowledgeable in CSS , you may have luck using the Developer Tools to locate helpful information through experimentation.

Hope this helps. Wish I knew enough to tell you more. There was a CSS community talk scheduled for yesterday by @Lithou that was probably very good. I am looking forward to checking it out if there is a recording.


It’s odd - I tried to grab the color code of the box border on two different themes both on hover and normal states. Then searched the theme.css files for all those color codes, but none of them were in the .css code.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.