Meta Post - Common CSS Hacks

Share & showcase
214

I think it becomes pink, because devs use hue-rotate. You might want to check this out :

https://discord.com/channels/686053708261228577/702656734631821413/757850309870485515

I also ever tried to change the fill color by using hue-rotate, and it worked.

1 Like
215

I’m not in the server you are linking to. Give an invite maybe?

216

Here you go :

I also copy the message here :

From silver :
@css stylist for those who style checkboxes, your checkbox color might be weird now because we used

.markdown-preview-view .task-list-item-checkbox {
  filter: hue-rotate(42deg);
}

to get the purple box. We did not find a way to change the blue color that came with the new Chromium.

To fix your weird color, you can add this too your theme:

.markdown-preview-view .task-list-item-checkbox {
  filter: none;
}

Sorry for the inconvenience! Let me know if you know a solution that does not involve hue-rotate.

217

Well I saw this too late, the invite expired lol

218

@fourteen
you can click on discord server and get an invite

but i saw @jokysatria already post the solution from the discord channel in his reply

219

It’s still saying Invite Invalid :frowning:

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:

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