Meta Post - Common CSS Hacks

[Spidrax]

Perfect. Thank you very much!

[DummyME]

Can someone please update this?
This isn’t working anymore for me

EDIT: Solved

[Klaas]

@DummyME: what isn’t working anymore?

[DummyME]

The justification in the text wasn’t working.
I looked through the CSS of the Atom Theme I was using, and found that the width was fixed at 900px which was making me think that the justification wasn’t working. I reduced it to 700px to get the desired outcome

Thanks for the reply.

[OlivierPS]

Unfortunately, the code for expanding the popup preview doesn’t work as expected for me. Heres how the popup looks:

The popup is of the expected size, but the content doesn’t fill it.

Here’s the code I’m using:

.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 900px;    /* was 300 */
    min-height: 800px;
    width: 800px;     /* was 400 */
}

I’m not using a custom theme, only code snippets and there isn’t any other redefinition of the popover elsewhere… at least that I’m aware of.

I’ve tried to investigate with the developer’s console, by I can’t have at the same time the popup and the pointer tool… maybe there’s a trick?

Thanks for your help.

Olivier :-{)

[Klaas]

@OlivierPS: you could try this:

/*============bigger link popup preview  ================*/
.popover.hover-popover {
    position: absolute;
    z-index: var(--layer-popover);
    transform: scale(0.9); /* makes the content smaller */
    max-height: 800px;    /* was 300 */
    min-height: 100px;
    width: 500px; /* was 400 */
    overflow: hidden;      
    padding: 0;
    border-bottom: none;
  }
/* I'm not sure what this does, got popove code from Obsdn-Dark-Rmx */
/*
  .popover {
    background-color: var(--background-primary);
    border: 1px solid var(--background-primary-alt);
    box-shadow: 3px 3px 7px var(--background-modifier-box-shadow);
    border-radius: 6px;
    padding: 15px 20px 10px 20px;
    position: relative;
}

There are plenty more other tweaks where this comes from.

[OlivierPS]

It still doesn’t work as expected:

If I change to min-height: 800px in an attempt to get a taller preview, I get a taller popup window, but not a taller content:

[phlind]

Just a small change to align the tab container header with the note header:

Before:

After:

CSS:

.workspace-tab-header-container {
    height: 36px;
    padding-top: 8px;
}

.workspace-split.mod-left-split > .workspace-leaf-resize-handle, .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
    height: calc(100% - 36px);
}

[OlivierPS]

After reseaching in the “App.css” files that defines all the default values and objects behaviours, I’ve succeeded in defining something much more satisfying for me. Here it goes :

/* -------------- bigger link popup preview -------------- */
.popover.hover-popover {
    transform: 	scale(0.9);
    max-height: 700px;
    min-height: 300px;
    width: 		800px;
    overflow: 	auto;
    padding: 	1rem;
}

.popover.hover-popover .markdown-embed {
	height:		100%;
}

You can, of course, adjust the values to your liking !

Olivier :-{)

[GreenChocho]

I really like this snippet that it totally remove the scrollbar from embeds.
However, it make the words blur for me when i set transform scale to be larger than 1. Do you also have this problem?

[borborygmus]

Hi, complete newbie here. Sorry if this is a dumb question, but how are we supposed to incorporate these into our current community theme? Are we supposed to copy and paste the code snippet into a plain text editor and store it in the vault/.obsidian/snippets folder?

[approximate]

Yes, put the snippets as CSS files into that folder, and enable snippets in Obsidian settings. When Obsidian reads that folder (you can force the refresh too), the snippets it recognized will be shown below in a list, and you will be able to turn each snippet on or off individually.

[Klaas]

@borborygmus: you can find plenty of newbie snippets here.

[borborygmus]

Thank you!!

[borborygmus]

This is great, thank you!

[burrito]

Wow really great! I realized it but was not in the mood of searching for this specific hack. Appreciate it

[burrito]

I just found out about queries and wanted to share what I am using to delete the query title and the highlighting of the “found” elements:

/* Hide search query title and stop highlighting found element */
/* ----------------------------------------------------------------------------- */
.markdown-preview-view .internal-query.is-embed .internal-query-header {
   	display: none;
}

.search-result-file-matched-text {
    color: inherit;
    background-color: inherit;
}

Maybe one can help me with this issue: I want to show more of the “context” around the query and not just some words. Unfortunately, the query result does not use the whole line width… Is there any way to accomplish this?

[Klaas]

@burrito: good question. I compared the query approach with the global search through the panel, and found that they are exactly the same. I had expected the query, being embedded in a note, would show more context.

[spacecadet]

Hello,
Thanks for putting the code together.
I have tried using this code but it doesnt seem to change the colour of the tag pills in the editor mode.
Please advise. Thank you

[Klaas]

@spacecadet: there is also a Github repository with useful CSS snippets that was intended for newbies, although all and sundry use them too

Tag pills are covered in their own section there. You will find the link to the Github repository here.