Meta Post - Common CSS Hacks

Share & showcase
220

i can still access the link. can you try using another browser?

221

Thanks for your sharing and I find it better for me to be like this:
/* highlight (==) not visible anymore if not active line */
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
font-size: 1em;
color: transparent;
}
It removes the distraction of “==” and avoids the alignment problem.

1 Like
222

How do I change the text color of the tags?

No matter what I do, the tag text color stays a light shade of blue.

223

Customised symbolic hr line

Tested and Used in Version: 0.9.6

Preview:

image
image1582×2120 377 KB

Code:

.markdown-preview-view hr {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary));
}

.markdown-preview-view hr::after {
  content: '§';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: var(--text-sub-accent);
  background-color: var(--background-primary);
}

This is a css hack I used in my theme: Obsidianite Theme, A lot of people liked it and added to their themes, so I decided to share it with everyone. Feel free to use it to customise your own theme! :gem:

17 Likes
225

Does anyone know how to change color of nodes and links in graph view. I saw awesome screenshots in some threads but can’t find CSS how to do it.

226

Go to post 5

227

Hi Seregey_B,
add this to the custom.css. Works fine for me:

.graph-view.color-fill {
color: #20a020;
}
.graph-view.color-line {
color: var(–text-accent);
}

BG Stefan

1 Like
228

Got something to contribute: Here’s how to target specifically block reference embeds:

.internal-embed[src*="#^"]

For anyone who is interested wtf all those symbols mean — .internal-embed divs have a src attribute which has the link text in it (so if you’re linking to a block ref in a page called note, it would be src="note#^blockref".
The square bracket part is an attribute selector which checks if the src value contains (*=) #^ — which is how you tell it’s a block reference link.

If you wanted to target heading links, you want where the src contains # but not #^, so you’d have to use something like this:

 .internal-embed[src*="#"]:not([src*="#^"])

For full page embeds, you want neither # or #^ so

.internal-embed:not([src*="#"]):not([src*="#^"])

As @Klaas pointed out in discord, this also means if you want to target embeds of a specific page, you could do

.internal-embed[src="The exact link I want"]
3 Likes
229

I also discovered a potential issue with the above: .internal-embed:not([src*="#"]):not([src*="^"]) is considered more specific than .internal-embed[src="Lorum ipsum test"] (because of the two :nots), so with the following code:

.internal-embed:not([src*="#"]):not([src*="^"]) {
    background-color: blue;
}

.internal-embed[src="Lorum ipsum test"] {
    background-color: yellow;
}

The “Lorum ipsum test” embed is coloured blue, not yellow like I would normally expect.

Adding the :nots fixes it though (because now it’s more specific):

.internal-embed:not([src*="#"]):not([src*="^"]) {
    background-color: blue;
}

.internal-embed[src="Lorum ipsum test"]:not([src*="#"]):not([src*="^"]) {
    background-color: yellow;
}

And the the “Lorum ipsum test” embed is yellow

1 Like
230

Please try this:

.popover.hover-popover {
  position: fixed;
  top: 100px !important;
  max-height: 700px; 
  min-height: 100px;
  width: 500px; 
  overflow: overlay;  
  padding: 0;
}

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

It can work in 0.9.12, but isn’t perfect, because the upper border is fixed and the popover may be farther away from the mouse position. And if you have any ideas, please let me know.

231

Does specifying a color for a certain tag only work in preview, or can it be done for editor mode too?
(Apologies if this was answered, I looked but might’ve missed it.)

233

Try to see this link:
https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/190

234

thanks…this doesn’t end up helping, though. it includes a lot of stuff that I don’t want (pills) and i can’t parse out what’s useful here. In fact, when I tried pasting it in over the existing code, the effects only showed up in preview mode.

235

In the CSS I’m working off of, the entirety of the code for tags is:

.cm-s-obsidian span.cm-hashtag,
a.tag {
color: var(–accent-2);
}

.tag { color: var(–accent-2);
}
.tag[href=“#litnotes”] {
color : #c7fd8b;

So the #litnotes tag shows up with a unique color in preview, but not in edit.

236

This line in the link will help you:

.cm-tag-litnotes, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-litnotes{
  color: #c7fd8b !important;
}
237

This does help. But–funny story–when I paste this in the color change works in Edit, but no longer works in Preview! (still an improvement, though)

238

Did you delete this part in your code?

    .cm-s-obsidian span.cm-hashtag,
    a.tag {
    color: var(–accent-2);
    }

    .tag { color: var(–accent-2);
    }
    .tag[href="#litnotes"] {
    color : #c7fd8b;

I think this part is for preview. And the line i sent is for edit mode.
otherwise, i have no ideas how to achieve this.

239

Didn’t delete that, but you know what? I had put your piece in between two of the other lines, but now moving it from the middle to the end of that block, the problem resolves. Thanks again for your help!

1 Like
240

Anyone know how I can change the color of text (specifically tags) inside the tag suggestion popover? Done some experimenting but haven’t found the right combobulation of code pieces.

241

See this discussion.