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)

code:

/*============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.

10 Likes

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?

2 Likes

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.

10 Likes

does anyone know how to change the look of 2nd level embed notes? (i.e. QuikNote.md 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:
image
Font size, frame, etc.

It should be doable within css, am i right?

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

@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 {
	cursor:zoom-in;}

.markdown-preview-view .internal-embed img:active {
	cursor:zoom-out;
	display:block;
	z-index:100;
	position:fixed;
    max-height:100%;
    max-width:100%;
    height:100%;
    width:100%;
    object-fit: contain;
    margin:0 auto;
    text-align:center;
    top: 50%;
  	transform: translateY(-50%);
    padding:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--background-primary);}
9 Likes