Meta Post - Common CSS Hacks

This helps a lot! Thanks

Bigger popup previews with more content (see below : before/after, that’s the same content in the popup)


/*============bigger link popup preview  ================*/
.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;    /* was 300 */
    min-height: 100px;
    width: 500px;     /* was 400 */

integrated in my theme obsdn-dark-rmx, available within the settings\Community Themes in obsidian.


Anyone know if it’s possible to get images to display in the editor? backgrounder-image isn’t working, is image display likely disabled in the editor?


Want to ask the same question for transclusions as well.

Sorry, I’m new to this CSS thing. Where exactly should I paste this code?
Thanks in advance.

In your vault there should be a obsidian.css, open it and append these lines to the file and save it. The change should be seen immediately.

1 Like

Thanks. There wasn’t any obsidian.css in my vault. I just created a txt and renamed ir to obsidian.css and then pasted the code. It works. Thanks @minhthanh3145.

1 Like

@gafsiqueira If ever you want to use a custom theme, you’ll have to use that theme’s CSS sheet and put it in your vault. You can open the sheet and add this code to the bottom of it.

1 Like

Thanks for this.

columns view for file explorer pane:
.nav-folder-children {column-width:200px;}

warning ! you need the filenames wrap mod & it’s somewhat buggy with very long filenames(the file list may jump/flicker, so you have to resize the file pane to fix) but I find it useful.


does anyone know how to change the look of 2nd level embed notes? (i.e. in the Snapshot) i would like it to look a lot smaller.

That’s cool! @lizardmenfromspace maybe you can add this to the TOC in the main post for easier access?

1 Like

@jcperezh: at present only 1 level of embedded notes (transclusion) is possible. There is a request to extend that.

If you agree with the request you can upvote it with a heart under the OP.

Done, but i’m trying to change the look from what we now have:
Font size, frame, etc.

It should be doable within css, am i right?

Edit: done. these are the parameters (for css-illiterate like me)

@jcperezh: I am CSS-illiterate, like you, so I am not sure. I understand from people’s comments that it is not doable, hence my request.

What makes you think it is doable? If so, I am very interested in it, so please share the code if you manage to get it.

Obsidian treat 2-level Transclusions as a Embed File. changing Font-size or border color from those parameter affect the look from these frame. it will not show the note, just change the size and look from these link

@jcperezh: so if it won’t show the 2nd level embedded file then we don’t really have 2-level transclusion.

I hope the feature request will be implemented because I love transclusions and use them a lot.

yes u r right, it should be 2 level minimum. (it has my upvote)

Here’s a new tidbit I am using:

Here’s what it looks like:

The code. Note, you can also remove the background or change it to a semi-translucent color.

.markdown-preview-view .internal-embed img {

.markdown-preview-view .internal-embed img:active {
    object-fit: contain;
    margin:0 auto;
    top: 50%;
  	transform: translateY(-50%);