Meta Post - Common CSS Hacks

[Klaas]

@pattman: you’re welcome. One word of caution about !important: use it sparingly. Some people use it liberally thinking it gets things done, so to speak, when it could cause other problems because it overrides.

I am not saying you should not use it, just be careful.

As for internal links colour in dark mode, you could try to prepend the code with .theme-dark followed by a space.

[pattman]

@Klaas: thanks for the tip, noted!

I prepended .theme-dark to the code and it worked perfectly!

Thanks again

[Spidrax]

I’m trying to get tag pillboxes to look good with my color scheme. To do this I need to change the text color of tags, but it doesn’t work. They still use the link color. I’m using the Nord theme.

Any ideas? Thanks!

.tag {
  color: red;
}

~Edit~

I figured it out. The theme has !important all over the place - I guess this prevents snippts from overriding it? Anyway I deleted the !important from the lines about link and was able to override the text color in tags.

.cm-hmd-internal-link
{
    color: var(--text-a) !important;
    text-decoration: none !important;
}

[TheEmperor]

links and math texts show above the image pop-up

[Spidrax]

I’m trying to get h1 centered with a horizontal rule on either side using the code at the link below, but it’s not working - h1 is centered but there’s no line. Can anyone help? Thanks.

How to style a heading with horizontal lines either side using CSS

[frvkl]

This seems to do the trick:

h1 {
	display: flex;
	width: 100%;
	align-items: center;
}
h1:before,
h1:after{
	content: '';
	background: gray;
	height: .1em;
	margin: .2em;
	flex: 1;
}

[Spidrax]

Thanks for that!

It works, but it has an unusual side effect - any [[Links]] in the h1 header no longer have spaces around them.

[frvkl]

Tr adding the following line at the end:

h1 > a {
	padding: 0 0.25em!important;
}

Should get you something like this:

[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.